在Angular4中，内置指令是框架提供的一组预先定义好的指令，它们可以帮助开发者更便捷地操作DOM元素，处理数据绑定，以及控制视图的结构。本文将深入探讨Angular4的内置指令，包括属性型指令、结构型指令以及模板引用变量。
1. **属性型指令**
属性型指令用于改变HTML元素的行为或者元素的属性。主要有以下几种：
- **NgClass**：通过 `[ngClass]` 指令，可以动态地添加或删除多个CSS类。例如：
```html
<div [ngClass]="currentClasses">This div</div>
```
在对应的组件中，`currentClasses` 可以是一个对象，键是类名，值是布尔类型，当值为真时添加该类。
- **NgStyle**：与 `NgClass` 类似，`[ngStyle]` 指令用于设置多个内联样式。例如：
```html
<div [ngStyle]="currentStyles">This div</div>
```
`currentStyles` 是一个对象，键是CSS属性名，值是对应的样式值。
- **NgModel**：双向数据绑定的核心指令，通过 `[(ngModel)]` 实现组件与表单元素之间的数据同步。例如：
```html
<input [(ngModel)]="currentHero.name">
```
2. **结构型指令**
结构型指令用于控制视图的结构，它们可以决定元素是否渲染，以及如何重复渲染。主要的结构型指令有：
- **NgIf**：`*ngIf` 指令根据表达式的值来决定元素是否存在于DOM中。例如：
```html
<app-hero-detail *ngIf="isActive"></app-hero-detail>
```
- **NgFor**：`*ngFor` 用于遍历数组并创建多个视图。例如：
```html
<div *ngFor="let hero of heroes">{{hero.name}}</div>
```
- **NgSwitch**：`[ngSwitch]` 指令用于基于不同的条件渲染不同的视图。它配合 `ngSwitchCase` 和 `ngSwitchDefault` 使用。例如：
```html
<div [ngSwitch]="currentHero.emotion">
<app-happy-hero *ngSwitchCase="'happy'" [hero]="currentHero"></app-happy-hero>
<app-sad-hero *ngSwitchCase="'sad'" [hero]="currentHero"></app-sad-hero>
<app-unknown-hero *ngSwitchDefault [hero]="currentHero"></app-unknown-hero>
</div>
```
3. **模板引用变量 ( #var )**
模板引用变量允许我们引用HTML元素、Angular组件或指令。例如：
```html
<input #phone placeholder="phone number">
<button (click)="callPhone(phone.value)">Call</button>
```
这里的 `#phone` 创建了一个模板引用变量，可以在组件的 TypeScript 代码中通过 `phone` 访问到输入框元素。
总结，Angular4的内置指令极大地简化了DOM操作和数据绑定，提高了开发效率。了解和熟练使用这些指令对于开发复杂的Angular应用至关重要。通过使用这些指令，开发者可以更专注于业务逻辑，而不是底层的DOM操作。在实际项目中，合理运用这些内置指令能够使代码更加简洁、可维护，同时提高用户体验。
