angular中的組件模板怎么用

這篇文章主要介紹“angular中的組件模板怎么用”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“angular中的組件模板怎么用”文章能幫助大家解決問(wèn)題。

Angular 是一個(gè)使用 HTML、CSS、TypeScript 構(gòu)建客戶端應(yīng)用的框架，用來(lái)構(gòu)建單頁(yè)應(yīng)用程序。

Angular 是一個(gè)重量級(jí)的框架，內(nèi)部集成了大量開箱即用的功能模塊。

Angular 為大型應(yīng)用開發(fā)而設(shè)計(jì)，提供了干凈且松耦合的代碼組織方式，使應(yīng)用程序整潔更易于維護(hù)。

組件模板

1、數(shù)據(jù)綁定

數(shù)據(jù)綁定就是將組件類中的數(shù)據(jù)顯示在組件模板中，當(dāng)組件類中的數(shù)據(jù)發(fā)生變化時(shí)會(huì)自動(dòng)被同步到組件模板中（數(shù)據(jù)驅(qū)動(dòng) DOM ）。

在 Angular 中使用插值表達(dá)式進(jìn)行數(shù)據(jù)綁定，即 {{ }} 。

<h3>{{message}}</h3>
<h3>{{getInfo()}}</h3>
<h3>{{a == b ? '相等': '不等'}}</h3>
<h3>{{'Hello Angular'}}</h3>
<p [innerHTML]="htmlSnippet"></p> <!-- 對(duì)數(shù)據(jù)中的代碼進(jìn)行轉(zhuǎn)義 -->

2、屬性綁定

2.1 普通屬性

屬性綁定分為兩種情況，綁定 DOM 對(duì)象屬性和綁定HTML標(biāo)記屬性。

• 使用 [屬性名稱] 為元素綁定 DOM 對(duì)象屬性。

  <img [src]="imgUrl"/>

• 使用 [attr.屬性名稱] 為元素綁定 HTML 標(biāo)記屬性

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

在大多數(shù)情況下，DOM 對(duì)象屬性和 HTML 標(biāo)記屬性是對(duì)應(yīng)的關(guān)系，所以使用第一種情況。

但是某些屬性只有 HTML 標(biāo)記存在，DOM 對(duì)象中不存在，此時(shí)需要使用第二種情況，比如 colspan 屬性，在 DOM 對(duì)象中就沒(méi)有。

或者自定義 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>
<!-- 當(dāng)按下回車鍵抬起的時(shí)候執(zhí)行函數(shù) -->
<input type="text" (keyup.enter)="onKeyUp()"/>

export class AppComponent {
  title = "test"
  onSave(event: Event) {
    // this 指向組件類的實(shí)例對(duì)象
    this.title // "test"
  }
}

4、獲取原生 DOM 對(duì)象

4.1 在組件模板中獲取

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

4.2 在組件類中獲取

使用 ViewChild 裝飾器獲取一個(gè)元素

<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、雙向數(shù)據(jù)綁定

數(shù)據(jù)在組件類和組件模板中雙向同步。

Angular 將雙向數(shù)據(jù)綁定功能放在了 @angular/forms 模塊中，所以要實(shí)現(xiàn)雙向數(shù)據(jù)綁定需要依賴該模塊。

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、內(nèi)容投影

<!-- 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>

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

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

• ng-content 通常在投影中使用：當(dāng)父組件需要向子組件投影數(shù)據(jù)時(shí)必須指定將數(shù)據(jù)投影到子組件的哪個(gè)位置，這時(shí)候就可以利用ng-content標(biāo)簽來(lái)做一個(gè)占位符，不會(huì)產(chǎn)生真實(shí)的dom元素，只會(huì)把投影的內(nèi)容copy過(guò)來(lái)。

• ng-container是一個(gè)特殊的容器標(biāo)簽，不會(huì)產(chǎn)生真實(shí)的dom元素，所以在ng-container標(biāo)簽添加屬性是無(wú)效的。

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

7、數(shù)據(jù)綁定容錯(cuò)處理

// 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";
/* ~ 相對(duì)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"
]

關(guān)于“angular中的組件模板怎么用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。