一文淺析angular中的元件模板

Angular 是一個使用 HTML、CSS、TypeScript 構建使用者端應用的框架，用來構建單頁應用程式。【相關教學推薦：《》】

Angular 是一個重量級的框架，內部整合了大量開箱即用的功能模組。

Angular 為大型應用開發而設計，提供了乾淨且鬆耦合的程式碼組織方式，使應用程式整潔更易於維護。

angualr檔案：

• Angular：https://angular.io/

• Angular 中文：https://angular.cn/

• Angular CLI：https://cli.angular.io/

• Angular CLI 中文：https://angular.cn/cli

元件模板

1、資料繫結

資料繫結就是將元件類中的資料顯示在元件模板中，當元件類中的資料發生變化時會自動被同步到元件模板中（資料驅動 DOM ）。

在 Angular 中使用插值表示式進行資料繫結，即 {{ }} 。

<h2>{{message}}</h2>
<h2>{{getInfo()}}</h2>
<h2>{{a == b ? '相等': '不等'}}</h2>
<h2>{{'Hello Angular'}}</h2>
<p [innerHTML]="htmlSnippet"></p> <!-- 對資料中的程式碼進行跳脫 -->

2、屬性繫結

2.1 普通屬性

屬性繫結分為兩種情況，繫結 DOM 物件屬性和繫結HTML標記屬性。

• 使用 [屬性名稱] 為元素繫結 DOM 物件屬性。

  <img [src]="imgUrl"/>

• 使用 [attr.屬性名稱] 為元素繫結 HTML 標記屬性

  <td [attr.colspan]="colSpan"></td>

在大多數情況下，DOM 物件屬性和 HTML 標記屬性是對應的關係，所以使用第一種情況。

但是某些屬性只有 HTML 標記存在，DOM 物件中不存在，此時需要使用第二種情況，比如 colspan 屬性，在 DOM 物件中就沒有。

或者自定義 HTML 屬性也需要使用第二種情況。

2.2 class 屬性

<button class="btn btn-primary" [class.active]="isActive">按鈕</button>
<div [ngClass]="{'active': true, 'error': true}"></div>

2.3 style 屬性

<button [style.backgroundColor]="isActive ? 'blue': 'red'">按鈕</button>
<button [ngStyle]="{'backgroundColor': 'red'}">按鈕</button>

3、事件繫結

<button (click)="onSave($event)">按鈕</button>
<!-- 當按下確認鍵擡起的時候執行函數 -->
<input type="text" (keyup.enter)="onKeyUp()"/>

export class AppComponent {
  title = "test"
  onSave(event: Event) {
    // this 指向元件類的範例物件
    this.title // "test"
  }
}

4、獲取原生 DOM 物件

4.1 在元件模板中獲取

<input type="text" (keyup.enter)="onKeyUp(username.value)" #username/>

4.2 在元件類中獲取

使用 ViewChild 裝飾器獲取一個元素

<p #paragraph>home works!</p>

import { AfterViewInit, ElementRef, ViewChild } from "@angular/core"

export class HomeComponent implements AfterViewInit {
  @ViewChild("paragraph") paragraph: ElementRef<HTMLParagraphElement> | undefined
  ngAfterViewInit() {
    console.log(this.paragraph?.nativeElement)
  }
}

使用 ViewChildren 獲取一組元素

<ul>
  <li #items>a</li>
  <li #items>b</li>
  <li #items>c</li>
</ul>

import { AfterViewInit, QueryList, ViewChildren } from "@angular/core"

@Component({
  selector: "app-home",
  templateUrl: "./home.component.html",
  styles: []
})
export class HomeComponent implements AfterViewInit {
  @ViewChildren("items") items: QueryList<HTMLLIElement> | undefined
  ngAfterViewInit() {
    console.log(this.items?.toArray())
  }
}

5、雙向資料繫結

資料在元件類和元件模板中雙向同步。

Angular 將雙向資料繫結功能放在了 @angular/forms 模組中，所以要實現雙向資料繫結需要依賴該模組。

import { FormsModule } from "@angular/forms"

@NgModule({
  imports: [FormsModule],
})
export class AppModule {}

<input type="text" [(ngModel)]="username" />
<button (click)="change()">在元件類中更改 username</button>
<div>username: {{ username }}</div>

export class AppComponent {
  username: string = ""
  change() {
    this.username = "hello Angular"
  }
}

6、內容投影

<!-- app.component.html -->
<bootstrap-panel>
	<div class="heading test">
        Heading
  </div>
  <div class="body">
        Body
  </div>
</bootstrap-panel>

<!-- panel.component.html -->
<div class="panel panel-default">
  <div class="panel-heading">
    <ng-content select=".heading"></ng-content>
  </div>
  <div class="panel-body">
    <ng-content select=".body"></ng-content>
  </div>
</div>

如果只有一個ng-content，不需要select屬性。

ng-content在瀏覽器中會被 <div class="heading test"></div> 替代，如果不想要這個額外的div，可以使用ng-container替代這個div。

• ng-content 通常在投影中使用：當父元件需要向子元件投影資料時必須指定將資料投影到子元件的哪個位置，這時候就可以利用ng-content標籤來做一個預留位置，不會產生真實的dom元素，只會把投影的內容copy過來。
• ng-container是一個特殊的容器標籤，不會產生真實的dom元素，所以在ng-container標籤新增屬性是無效的。

<!-- app.component.html -->
<bootstrap-panel>
	<ng-container class="heading">
        Heading
    </ng-container>
    <ng-container class="body">
        Body
    </ng-container>
</bootstrap-panel>

7、資料繫結容錯處理

// app.component.ts
export class AppComponent {
    task = {
        person: {
            name: '張三'
        }
    }
}

<!-- 方式一 -->
<span *ngIf="task.person">{{ task.person.name }}</span>
<!-- 方式二 -->
<span>{{ task.person?.name }}</span>

8、全域性樣式

/* 第一種方式 在 styles.css 檔案中 */
@import "~bootstrap/dist/css/bootstrap.css";
/* ~ 相對node_modules資料夾 */

<!-- 第二種方式 在 index.html 檔案中  -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

// 第三種方式 在 angular.json 檔案中
"styles": [
  "./node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
]

更多程式設計相關知識，請存取：！！

以上就是一文淺析angular中的元件模板的詳細內容，更多請關注TW511.COM其它相關文章！