Angular - 文字插值

文字插值是在模板中使用模板表示式來使用元件的資料。

語法

文字插值的語法是在雙大括號內編寫表示式，如下所示：

{{ <template expression> }}

讓我們假設一個元件有一個名為 name 的屬性。

export class HomeComponent {
   name: string = 'John'
}

現在，name 可以在其模板中使用，如下所示：

Hello {{ name }}

模板表示式

模板表示式與 JavaScript 表示式相同，除了兩組表示式：

在模板中沒有用處的表示式（賦值、物件建立等）
具有副作用的表示式

例如，增量運算子 (++) 基本上會遞增給定變數，然後返回遞增的值。這稱為副作用。由於增量運算子會產生副作用，因此它不允許在模板表示式中使用。

一些不允許在模板表示式中使用的 JavaScript 表示式如下：

賦值運算子：模板沒有在模板上下文中建立新變數併為其設定值的概念。
new 關鍵字：模板不允許建立新物件。任何物件都應在元件類中建立。在元件中建立的物件將在模板中可用。
typeof 和 instanceOf 關鍵字：模板不允許在模板中解釋物件。邏輯應透過公共方法在元件中完成，並應公開給模板。
表示式鏈：模板表示式只允許單個表示式，因此所有鏈式運算子都被排除在外。
增量和減量運算子：模板不允許副作用。由於增量和減量運算子具有副作用，因此它們被排除在外。
位運算子：管道符號 (|) 用於表示 Angular 管道概念。Angular 管道用於文字轉換。

由於模板將在應用程式的生命週期中多次呈現，因此 Angular 團隊建議表示式應簡短、快速且無副作用。

模板表示式上下文

模板表示式具有三個上下文：

元件屬性：元件屬性是在元件例項中設定的屬性。例如，元件中的使用者物件 (user) 可以如下在模板中使用：

{{ user.name }}

此處，user 上下文是元件例項。

模板輸入變數：模板輸入變數是透過指令分配給模板的輸入。例如，ngFor 指令將迴圈的索引和當前項傳送到模板，如下所示：

<ul>
   <li *ngFor="let user of users">{{user.name}}</li>
</ul>

此處，user 上下文是模板輸入變數。

模板引用變數：模板引用變數基本上是在給定模板中對 HTML 元素、元件和指令的表示，如下所示：

<input #user /> <span>{{ user.value }}</span>

此處，user 上下文是模板引用變數。

如果名稱衝突，上下文的優先順序如下：

模板變數
指令上下文中的變數
元件成員變數

工作示例

步驟 1：使用 Angular CLI 建立一個新應用程式，如下所示：

$ ng new my-app

步驟 2：使用 Angular CLI 建立一個元件 MyTemplateRefVarSample，如下所示：

$ ng generate component Hello
CREATE src/app/hello/hello.component.css (0 bytes)
CREATE src/app/hello/hello.component.html (20 bytes)
CREATE src/app/hello/hello.component.spec.ts (552 bytes)
CREATE src/app/hello/hello.component.ts (198 bytes)
UPDATE src/app/app.module.ts (757 bytes)

步驟 3：接下來，開啟元件檔案 hello.component.ts 並新增一個值為 John 的變數 user

import { Component } from '@angular/core';

@Component({
   selector: 'app-hello',
   templateUrl: './hello.component.html',
   styleUrls: ['./hello.component.css']
})
export class HelloComponent {
   user: string = "John"
}

步驟 4：接下來，開啟元件模板檔案 hello.component.html 並新增一個輸入元素

<h1> Hello, {{ user }} </h1>

此處，user 是元件公開的模板輸入變數

步驟 5：接下來，開啟應用程式元件的模板檔案 src/app/app.component.html 並新增我們的元件，如下所示：

<app-hello />

步驟 6：最後，執行應用程式並檢查按鈕是否正常工作。

總結

文字插值易於學習，因為它使用 JavaScript 表示式。由於文字插值不允許使用指令碼標籤，並且只允許使用無副作用的表示式，因此文字插值將有助於建立安全可靠的 Web 應用程式。

列印頁面