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 应用程序。

打印页面