1. ngIf: 根据表达式的值决定是否显示或隐藏一个元素。
<div *ngIf="isConditionTrue">内容将在条件为真时显示</div>
2. ngFor: 用于循环遍历数组或对象。
<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>
3. ngSwitch: 用于根据表达式的值选择不同的模板。
<div [ngSwitch]="value">
<div *ngSwitchCase="'case1'">条件为case1时显示的内容</div>
<div *ngSwitchCase="'case2'">条件为case2时显示的内容</div>
<div *ngSwitchDefault>默认情况下显示的内容</div>
</div>
4. ngModel: 用于双向数据绑定,通常与表单元素一起使用。
<input [(ngModel)]="username" />
5. ngClass: 用于动态设置元素的 CSS 类。
<div [ngClass]="{'active': isActive, 'disabled': isDisabled}">动态设置的类</div>
6. ngStyle: 用于动态设置元素的样式。
<div [ngStyle]="{'color': textColor, 'font-size': fontSize}">动态设置的样式</div>
这只是 Angular 内置指令的一小部分。通过使用这些指令,你可以更方便地构建动态、交互性强的前端应用程序。
转载请注明出处:http://www.zyzy.cn/article/detail/4930/Angular