Angular 是一个流行的前端框架,它提供了许多内置指令,用于在应用程序中操作 DOM、处理数据绑定等。以下是一些 Angular 内置指令的例子:

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