Angular - 模板變數

模板變數是在模板上下文中可用的變數。Angular 不允許開發者在模板中建立新變數。相反，它允許透過元件或指令例項將新變數傳遞到模板中。此外，它允許在模板中宣告變數並引用模板中可用的任何現有元素。

讓我們在本節中進一步瞭解模板變數。

模板變數的型別

有兩種型別的模板變數：

模板輸入變數：模板輸入變數透過元件或指令例項傳遞到模板中。
模板引用變數：模板引用變數在模板本身中宣告，並引用模板中存在的元素。

模板輸入變數

模板輸入變數是傳遞到模板中並在模板上下文中可用的變數。模板輸入變數透過多種渠道傳遞到模板中。它們如下：

元件：元件將其所有公共變數/屬性公開給其模板。
指令：指令在其執行期間將選擇性變數公開給模板。例如，`ngFor` 將索引和當前迴圈變數公開給模板，如下所示：

<ul>
   <ng-template ngFor let-user let-i="index" [ngForOf]="users">
      <li>User {{i}}: {{user.name}}
   </ng-template>
</ul>

這裡：

`users` 是元件公開的模板輸入變數。
`user` 和 `i` 是 `ngFor` 指令公開的模板輸入變數。

模板引用變數

宣告模板引用變數的語法是 `#var`（`#` 加上變數名）。Angular 允許將變數宣告為模板中可用元素的屬性。模板引用變數的型別和值取決於其宣告位置。

步驟1：如果變數在元素內宣告，則它引用 HTML 元素。

<button #btn>Click Here</button>

這裡，`btn` 引用型別為 `HtmlButtonElement` 的按鈕物件。

步驟2：如果變數在元件內宣告，則它引用元件例項。

<app-comp #mycomp></app-comp>

這裡，`mycomp` 引用元件例項，並且可以訪問被引用元件的內部。

步驟3：如果變數在模板內（`ng-template`，用於在模板內建立模板的標籤）宣告，則它引用模板的例項。

<ng-template #mytemplate>
   <div>Hi, I am template within the template</div>
</ng-template>

這裡，`mytemplate` 引用模板的例項。

步驟4：如果變數在自定義 Web 元件內宣告，則它引用自定義 HTML 元素。

<my-card #mycard>Click Here</my-card>

這裡，`mycard` 引用自定義 Web 元件 `my-card`。

讓我們看看如何建立一個模板引用變數 `firstname` 來引用一個輸入元素，如下所示：

<input #firstname id="firstname" type="text" name="firstname" value="John" />

這裡：

`firstname` 是模板引用變數。
`firstname` 代表 `HtmlInputElement` 元素的例項。`HtmlInputElement` 是 DOM 中表示輸入元素的型別。
`firstname` 可以訪問 `HtmlInputElement` 元素的所有屬性和方法。

模板引用變數可以在模板語句和文字插值中使用。

如何使用模板引用變數

讓我們建立一個應用程式，使用純模板引用變數的概念將使用者在輸入框中輸入的值顯示到 span 元素中。該應用程式將為使用者提供一個按鈕，以便觸發訪問輸入框值並將值顯示在 span 元素中的過程。

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

$ ng new my-app

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

$ ng generate component MyTemplateRefVarSample
CREATE src/app/my-template-ref-var-sample/my-template-ref-var-sample.component.css (0 bytes)
CREATE src/app/my-template-ref-var-sample/my-template-ref-var-sample.component.html (41 bytes)
CREATE src/app/my-template-ref-var-sample/my-template-ref-var-sample.component.spec.ts (675 bytes)
CREATE src/app/my-template-ref-var-sample/my-template-ref-var-sample.component.ts (278 bytes)
UPDATE src/app/app.module.ts (679 bytes)

步驟3：接下來，開啟元件模板檔案 `my-template-ref-var-sample.component.html` 並新增一個輸入元素。

<input type="text" id="firstname" name="firstname" #source />

這裡，`source` 是引用輸入元素的模板變數。

步驟4：接下來，在模板中新增一個 span 元素。

<input type="text" id="firstname" name="firstname" #source /> 
<span #target></span>

這裡，`target` 是引用目標 span 元素的模板變數。

步驟5：接下來，在模板中新增一個按鈕。

<input type="text" id="firstname" name="firstname" #source /> 
<span #target></span>

<div style="padding-top: 5px;">
   <button>Show</button>
</div>

這裡，按鈕用於觸發事件並獲取使用者在 `firstname` 輸入元素中輸入的值，並將其設定為 span 元素。

步驟6：接下來，使用屬性繫結新增點選事件並編寫邏輯以將輸入元素的值設定為 span 元素。

<input type="text" id="firstname" name="firstname" #source /> 
<span #target></span>

<div style="padding-top: 5px;">
   <button (click)="target.innerText = source.value;">Show</button>
</div>

這裡，點選事件有一個簡單的模板語句，它將透過 `source` 物件的 `value` 屬性訪問使用者在輸入元素中輸入的值，並使用 `target` 物件的 `innerText` 屬性將其設定為目標元素 span。

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

<app-my-template-ref-var-sample />

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

帶有值的模板引用變數

通常，模板引用變數只會宣告一個要在元素內部引用的變數。

<form #formVar>
   <!-- form information -->
</form>

這裡，`formVar` 代表 `HtmlFormElement` 型別的物件。

但是，在某些情況下，它也可以包含值。如果它包含值，則該值會被解釋為具有與設定值匹配的 `exportAs` 屬性的指令或元件。

為了更好地理解這個概念，讓我們將上面的表單更改為包含 `ngForm` 作為值。

<form #formVar="ngForm">
   <!-- form information -->
</form>

`ngForm` 是 Angular 團隊提供的支援表單程式設計的指令。這裡，`formVar` 引用 `ngForm` 指令的例項而不是 `HtmlFormElement`。`formVar` 可以訪問 `ngForm` 的屬性和方法（例如 `formVar.form.valid`）並進行更好的表單程式設計。

總結

模板變數在 Angular 框架中易於使用。它具有最小的且易於理解的特性，並涵蓋了客戶端程式設計的所有方面。

列印頁面