Angular 技术教程 – 结构型指令详解
1. 结构型指令简介
Angular 提供了多种结构型指令，用于动态地添加或移除 DOM 元素，改变 DOM 结构。常见的结构型指令有 ngIf 和 ngFor。
2. ngIf 指令
ngIf 是用来根据表达式的真假值来添加或移除 DOM 元素的指令。
示例代码
<div *ngIf="condition">
条件为真时显示的内容
</div>
详细案例讲解
假设我们有一个简单的 Angular 应用，根据一个条件来显示或隐藏一个按钮。
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
condition: boolean = false;
toggleCondition() {
this.condition = !this.condition;
}
}
// app.component.html
<button (click)="toggleCondition()">切换条件</button>
<div *ngIf="condition">
条件为真时显示这个按钮！
<button>显示的内容中的按钮</button>
</div>
3. ngFor 指令
ngFor 指令用于基于一个可迭代对象（如数组）来重复渲染 DOM 元素。
示例代码
<div *ngFor="let item of items">
{{ item }}
</div>
详细案例讲解
假设我们有一个用户列表，我们想要展示所有用户的名字。
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
users = ['Alice', 'Bob', 'Charlie'];
}
// app.component.html
<h2>用户列表</h2>
<ul>
<li *ngFor="let user of users">
{{ user }}
</li>
</ul>
4. 总结
ngIf 和 ngFor 是 Angular 中非常重要的结构型指令，能够帮助开发者根据条件动态地渲染 DOM 元素，并基于可迭代对象重复渲染元素。理解并熟练使用这两个指令，将大大提高你的 Angular 应用开发效率。
