一文淺析angular中的組件模板

本篇文章帶大家了解一下angular中的元件模板，簡單介紹一下相關知識點：資料綁定、屬性綁定、事件綁定、雙向資料綁定、內容投影等等，希望對大家有幫助！

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

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 ? &#39;相等&#39;: &#39;不等&#39;}}</h2>
<h2>{{&#39;Hello Angular&#39;}}</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]="{&#39;active&#39;: true, &#39;error&#39;: true}"></div>

2.3 style 屬性

<button [style.backgroundColor]="isActive ? &#39;blue&#39;: &#39;red&#39;">按钮</button>
<button [ngStyle]="{&#39;backgroundColor&#39;: &#39;red&#39;}">按钮</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 在元件範本中取得 #

3b39778b4d3d5bec9ef88483dd2ffc49

4.2 在元件類別中取得

使用

ViewChild 裝飾器取得一個元素

d9e1532bd77523d7523e227ff359de85home works!94b3e26ee717c64999d7867364b1b4a3

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在瀏覽器中會被

290914cdcad83023eae6a5478da7e0ba16b28748ea4df4d9c2150843fecfba68 取代，如果不想要這個額外的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/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />

// 第三种方式 在 angular.json 文件中
"styles": [
  "./node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
]

更多程式相關知識，請造訪：

程式設計影片！ ！

以上是一文淺析angular中的組件模板的詳細內容。更多資訊請關注PHP中文網其他相關文章！