Angular 2 - 指令

在Angular 2中，指令充当了视图层的逻辑控制器。它们可以动态地修改元素属性、添加/删除子元素以及呈现视图中的数据。指令是Angular 2中的一个强大而灵活的功能，可以用于创建自定义UI组件、路由、表单验证等。

内置指令

Angular 2提供了一些内置指令，这些指令可以直接在HTML模板中使用。以下是一些常用的内置指令：

• ngIf: 根据条件包含或排除HTML元素。
• ngFor: 根据给定的数组列表添加HTML元素。
• ngSwitch: 根据条件选择要显示的HTML模板。
• ngClass: 动态添加或删除元素的CSS类。
• ngStyle: 动态设置元素的样式。

这些指令的使用方法和语法经验丰富的开发人员应该都很熟悉。以下是ngIf指令在HTML模板中的使用示例：

<div *ngIf="isVisible">这个div只会在isVisible为真时显示</div>

自定义指令

除了内置指令之外，Angular 2还允许您创建自定义指令。使用自定义指令，您可以创建新的HTML元素、修改现有元素的行为、动态添加样式等等。

以下是一个简单的自定义指令的示例：

import {Directive, ElementRef} from '@angular/core';

@Directive({
    selector: '[myHighlight]'
})
export class HighlightDirective {
    constructor(el: ElementRef) {
        el.nativeElement.style.backgroundColor = 'yellow';
    }
}

这个自定义指令可以在HTML模板中使用myHighlight属性，以使指定的HTML元素高亮显示：

<p myHighlight>我将被高亮显示！</p>

指令参数

指令可以接受参数以在其行为或外观上发挥作用。在Angular 2中，您可以使用属性绑定来将参数传递给指令。

以下是一个接受参数的自定义指令示例：

import {Directive, Input, HostBinding} from '@angular/core';

@Directive({
    selector: '[myVisible]'
})
export class VisibleDirective {
    @Input() myVisible: boolean;

    @HostBinding('style.display')
    get display() {
        return this.myVisible ? null : 'none';
    }
}

这个指令可以通过myVisible属性控制元素的显示/隐藏状态。下面是使用指令的示例：

<p [myVisible]="isVisible">我会显示或隐藏！</p>

总结

指令是Angular 2中非常强大且灵活的功能。它们使您能够直接在HTML模板中控制元素、动态更改元素的属性和样式、以及与数据模型进行交互。掌握指令的使用方法是成为优秀Angular 2开发人员的必备技能之一。