指令与数据绑定

在Angular中，指令是一个带有逻辑功能的HTML标签，用来扩展HTML的功能。Angular提供了一些内置指令来实现常见的功能，比如条件显示、循环显示、属性绑定等。下面是一些常用的内置指令以及它们的用法：

1. ngIf：用于根据条件来显示或隐藏元素。

<div *ngIf="isShow">Hello, Angular!</div>

2. ngFor：用于循环显示一个数组中的元素。

<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

3. ngModel：用于双向数据绑定，将输入框中的值绑定到组件中的属性。

<input type="text" [(ngModel)]="name">
<p>Hello, {{ name }}!</p>

4. ngClass：用于根据条件来动态添加类名。

<div [ngClass]="{ 'active': isActive }">Hello, Angular!</div>

5. ngStyle：用于根据条件来动态添加样式。

<div [ngStyle]="{ 'color': isRed ? 'red' : 'black' }">Hello, Angular!</div>

6. ngSwitch：用于根据条件来显示不同的内容。

<div [ngSwitch]="color">
  <p *ngSwitchCase="'red'">The color is red.</p>
  <p *ngSwitchCase="'blue'">The color is blue.</p>
</div>

以上是一些常用的内置指令及其用法，通过组合这些指令可以实现丰富的页面功能。在实际开发中，还可以根据需要自定义指令来实现更复杂的功能。希望这些内容能帮助你更好地理解Angular中的指令和数据绑定。