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 框架中易于使用。它具有最小的且易于理解的特性，并涵盖了客户端编程的所有方面。

打印页面