以实际案例展开叙述：Angular 4.0 内置指令指南

Angular 4.0 内置指令介绍

Angular 4.0 提供了丰富的内置指令，可帮助你构建交互性强、动态的 Web 应用程序。这些内置指令涵盖了各种常见的开发场景，如数据绑定、事件处理、条件渲染和表单处理等。使用这些内置指令，你可以大大提高开发效率，并编写出更简洁、更易维护的代码。

Angular 4.0 内置指令使用指南

1. 数据绑定指令

1.1 插值指令（}）

插值指令用于将表达式或变量的值插入到 HTML 模板中。表达式或变量的值将被替换为实际值，然后显示在 HTML 模板中。例如：

<h1>Hello {{ name }}!</h1>

上面的代码中，插值指令 {{ name }} 将变量 name 的值插入到 <h1> 标签中。当 name 变量的值为 "John" 时，上面的代码将输出如下 HTML：

<h1>Hello John!</h1>

1.2 属性绑定指令（[attr.name]）

属性绑定指令用于将表达式或变量的值绑定到 HTML 元素的属性。例如：

<input type="text" [attr.name]="username">

上面的代码中，属性绑定指令 [attr.name]="username" 将变量 username 的值绑定到 <input> 元素的 name 属性。当 username 变量的值为 "john" 时，上面的代码将输出如下 HTML：

<input type="text" name="john">

1.3 类绑定指令（[class.name]）

类绑定指令用于将表达式或变量的值绑定到 HTML 元素的类。例如：

<div [class.active]="isActive">
  ...
</div>

上面的代码中，类绑定指令 [class.active]="isActive" 将变量 isActive 的值绑定到 <div> 元素的 active 类。当 isActive 变量的值为 true 时，上面的代码将输出如下 HTML：

<div class="active">
  ...
</div>

2. 事件处理指令

2.1 点击事件指令（(click)）

点击事件指令用于在 HTML 元素上添加点击事件监听器。例如：

<button (click)="handleClick()">
  Click me!
</button>

上面的代码中，点击事件指令 (click)="handleClick()" 在 <button> 元素上添加了一个点击事件监听器。当用户点击 <button> 元素时，handleClick() 方法将被调用。

2.2 鼠标悬停事件指令（(mouseenter)）

鼠标悬停事件指令用于在 HTML 元素上添加鼠标悬停事件监听器。例如：

<div (mouseenter)="handleMouseEnter()">
  Mouse over me!
</div>

上面的代码中，鼠标悬停事件指令 (mouseenter)="handleMouseEnter()" 在 <div> 元素上添加了一个鼠标悬停事件监听器。当用户将鼠标悬停在 <div> 元素上时，handleMouseEnter() 方法将被调用。

2.3 键盘事件指令（(keydown)）

键盘事件指令用于在 HTML 元素上添加键盘事件监听器。例如：

<input (keydown)="handleKeyDown($event)">

上面的代码中，键盘事件指令 (keydown)="handleKeyDown($event)" 在 <input> 元素上添加了一个键盘事件监听器。当用户在 <input> 元素中按下键盘时，handleKeyDown() 方法将被调用，并将键盘事件对象作为参数传递给该方法。

3. 条件渲染指令

3.1 *ngIf 指令

*ngIf 指令用于根据表达式或变量的值来显示或隐藏 HTML 元素。例如：

<div *ngIf="show">
  ...
</div>

上面的代码中，*ngIf 指令 *ngIf="show" 根据变量 show 的值来显示或隐藏 <div> 元素。当 show 变量的值为 true 时，<div> 元素将被显示；当 show 变量的值为 false 时，<div> 元素将被隐藏。

3.2 *ngFor 指令

*ngFor 指令用于遍历数组或对象并为每个元素生成 HTML 元素。例如：

<ul>
  <li *ngFor="let user of users">
    {{ user.name }}
  </li>
</ul>

上面的代码中，*ngFor 指令 *ngFor="let user of users" 遍历数组 users 并为每个元素生成一个 <li> 元素。<li> 元素的内容是用户的名字。

4. 表单处理指令

4.1 表单控件指令（[(ngModel)]）

表单控件指令 [(ngModel)] 用于将表单控件的值与模型属性进行双向绑定。例如：

<input type="text" [(ngModel)]="username">

上面的代码中，表单控件指令 [(ngModel)]="username" 将 <input> 元素的值与 username 模型属性进行双向绑定。这意味着当用户在 <input> 元素中输入值时，username 模型属性的值也会随之改变；当 username 模型属性的值发生改变时，<input> 元素的值也会随之改变。

4.2 表单组指令（[formGroup]）

表单组指令 [formGroup] 用于将一组表单控件组合在一起。例如：

<form [formGroup]="userForm">
  <input type="text" formControlName="username">
  <input type="password" formControlName="password">
</form>

上面的代码中，表单组指令 [formGroup]="userForm" 将 <input> 元素和 <password> 元素组合在一起，并将其命名为 userForm。这使得你可以使用 userForm 模型属性来访问表单中的所有控件。

结语

Angular 4.0 内置指令是构建交互性强、动态的 Web 应用程序的重要工具。通过使用这些指令，你可以大大提高开发效率，并编写出更简洁、更易维护的代码。本文介绍了 Angular 4.0 中最常用的内置指令，并提供了大量代码示例。希望这些内容对你有帮助。