Angular - 模板语句

模板语句用于通过 HTML 文档中的事件与用户交互。模板语句允许开发人员响应用户操作调用组件的方法。此外，它还允许开发人员使用多个以冒号 (;) 分隔的语句在模板本身中编写简单的逻辑。在本章中，我们将进一步了解模板语句。

语法

模板语句类似于 JavaScript 表达式，但存在以下例外。

复合赋值运算符：模板语句不支持复合赋值运算符（+= 和 -=）。与模板表达式相比，语句支持普通的赋值运算符 (=)。
new 关键字：模板不允许创建新对象。任何对象都应在组件类中创建。在组件中创建的对象将在模板中可用。
增量和减量运算符：模板不允许副作用。由于增量和减量运算符具有副作用，因此它们被排除在外。
位运算符：不支持位运算符（| 和 &）。
管道运算符：模板语句不支持管道 (|) 运算符。

与模板表达式相比，语句支持赋值运算符和链式运算符（; 和 ,）

如何在模板中使用模板语句

模板语句可以写入双引号内，并将其设置为组件或元素的事件属性的值，如下所示：

<button (click)="<statements>">Click here</button>

这里，

(click) 表示按钮的点击事件。它使用事件绑定的概念，这将在事件绑定章节中进行解释。
<statement> 可以是上一节中指定的任何模板语句。

模板语句上下文

与模板表达式类似，模板语句具有三个上下文，

组件的属性/方法：组件的属性/方法是在组件实例中设置的属性/方法。例如，组件中的用户对象 (user) 可以在模板中按如下方式使用：

<button (click)="showUser(user)">Show user</button)

这里，user 属性和 showUser() 方法的上下文是组件的实例。

模板输入变量：模板输入变量是通过指令分配给模板的输入。例如，ngFor 指令将循环的索引和当前项发送到模板，如下所示：

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

这里，user 属性的上下文是模板输入变量。

模板引用变量：模板引用变量基本上是在给定模板中表示 HTML 元素、组件和指令，如下所示：

<input #user /> <span>{{ user.value }}</span>
<button (click)="showUser(user.value)">Show User</button>

这里，user 和 user.value 的上下文是模板引用变量。

在名称冲突的情况下，上下文的优先级如下：

模板变量
指令上下文的变量
组件的成员变量和方法

Angular 团队建议在组件的方法中使用复杂的逻辑，并通过模板语句调用它，而不是尝试使用模板语句在模板本身中编写逻辑。

工作示例

让我们考虑一个通过用户操作显示/隐藏部分的简单场景。

步骤 1：使用 angular CLI 创建一个新应用程序，如下所示：

$ ng new my-app

步骤 2：使用 angular CLI 创建一个组件 BlockWithShowHide，如下所示：

$ ng generate component BlockWithShowHide
CREATE src/app/block-with-show-hide/block-with-show-hide.component.css (0 bytes)
CREATE src/app/block-with-show-hide/block-with-show-hide.component.html (35 bytes)
CREATE src/app/block-with-show-hide/block-with-show-hide.component.spec.ts (639 bytes)
CREATE src/app/block-with-show-hide/block-with-show-hide.component.ts (255 bytes)
UPDATE src/app/app.module.ts (525 bytes)

步骤 3：接下来，打开组件文件 src/app/block-with-show-hide/block-with-show-hide.component.ts 并添加一个变量 hideStatus 来表示显示/隐藏状态

hideStatus: boolean = false;

步骤 4：接下来，添加两个方法 show() 和 hide() 以根据用户的操作更改 hideStatus 变量的值。

show() {
   this.hideStatus = false;
}

hide() {
   this.hideStatus = true;
}

步骤 5：接下来，打开组件的模板文件 src/app/block-with-show-hide/block-with-show-hide.component.html 并添加一个带有两个按钮的块，

<div>
   <div>
      <p>Hi, I am simple section created for the testing purpose<p>
   </div>
   <button>Hide the section</button> 
   <button>Show the section</button>
</div>

步骤 6：接下来，将点击事件添加到按钮并添加相应的的方法，如下所示：

<div>
   <div [class.hide]="hideStatus">
      <p>Hi, I am simple section created for the testing purpose<p>
   </div>
   <button (click)="hide()">Hide the section</button> 
   <button (click)="show()">Show the section</button>
</div>

步骤 7：接下来，在要显示/隐藏的块中添加一个类属性绑定 class.hide，其值为 hideStatus。

<div>
   <div [class.hide]="hideStatus">
      <p>Hi, I am simple section created for the testing purpose<p>
   </div>
   <button (click)="hide()">Hide the section</button> 
   <button (click)="show()">Show the section</button>
</div>

这里，

class.hide 表示隐藏 CSS 类，如果其值 hideStatus 为 true，则将设置该类。

步骤 8：组件的完整列表如下：

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

@Component({
   selector: 'app-block-with-show-hide',
   templateUrl: './block-with-show-hide.component.html',
   styleUrls: ['./block-with-show-hide.component.css']
})
export class BlockWithShowHideComponent {
   hideStatus: boolean = false;
   
   show() {
      this.hideStatus = false;
   }
   
   hide() {
      this.hideStatus = true;
   }
}

步骤 9：接下来，在 CSS 文件 src/app/block-with-show-hide/block-with-show-hide.component.css 中添加隐藏 CSS 类

.hide {
   display: none;
}

步骤 10：接下来，打开应用程序组件的模板文件 src/app/app.component.html 并添加我们的组件，如下所示：

<app-block-with-show-hide />

步骤 11：最后，运行应用程序并检查块是否根据用户的操作显示/隐藏。

总结

模板语句使应用程序能够以安全有效的方式与用户交互，而不会牺牲代码的灵活性以及应用程序丰富的用户体验。

打印页面