以下是一些关于 Angular 模板语句的基本概念：
1. 事件绑定： 模板语句最常见的用法是在用户触发的事件上执行代码。使用小括号 () 来进行事件绑定。
<!-- 模板 -->
<button (click)="onButtonClick()">Click me</button>
// 组件类
export class AppComponent {
onButtonClick() {
console.log('Button clicked!');
}
}
2. 模板表达式： 模板语句可以包含任意的 JavaScript 表达式，用于计算和返回一个值。模板表达式通常用于属性绑定。
<!-- 模板 -->
<p>{{ 2 + 2 }}</p>
3. 条件语句： 模板语句支持使用 if 和 else 来执行条件语句。
<!-- 模板 -->
<div *ngIf="isLoggedIn; else notLoggedIn">User is logged in</div>
<ng-template #notLoggedIn>User is not logged in</ng-template>
// 组件类
export class AppComponent {
isLoggedIn = true;
}
4. 循环语句： 使用 *ngFor 来执行循环语句，用于遍历集合中的元素。
<!-- 模板 -->
<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>
// 组件类
export class AppComponent {
items = ['Item 1', 'Item 2', 'Item 3'];
}
5. 事件对象： 通过在事件绑定中传递 $event 可以获取事件对象，以便在模板语句中使用。
<!-- 模板 -->
<button (click)="onButtonClick($event)">Click me</button>
// 组件类
export class AppComponent {
onButtonClick(event: Event) {
console.log('Button clicked!', event);
}
}
6. 方法调用： 在模板语句中可以调用组件类中的方法。
<!-- 模板 -->
<button (click)="toggleVisibility()">Toggle Visibility</button>
// 组件类
export class AppComponent {
isVisible = true;
toggleVisibility() {
this.isVisible = !this.isVisible;
}
}
7. 属性绑定： 模板语句可以通过方括号 [] 来进行属性绑定，用于动态设置 HTML 元素的属性。
<!-- 模板 -->
<input [value]="username" (input)="onInputChange($event.target.value)">
// 组件类
export class AppComponent {
username = '';
onInputChange(value: string) {
console.log('Input changed:', value);
}
}
这些是一些常见的 Angular 模板语句的用法。通过模板语句，你可以在模板中执行各种逻辑，实现动态和交互式的用户界面。模板语句是 Angular 中一项强大的特性，使开发者能够方便地与用户交互并响应应用程序的各种事件。
转载请注明出处：http://www.zyzy.cn/article/detail/4921/Angular