Angular 4 指令快速入门教程

本系列教程的开发环境及开发语言：

Angular 4 +

Angular CLI

TypeScript

基础知识

Angular CLI 基本使用

安装 Angular CLI (可选)

npm install -g @angular/cli

创建新的项目

ng new PROJECT-NAME

启动本地服务器

cd PROJECT-NAME ng serve

Angular 指令简介

Angular 的指令分为三种：

组件(Component directive)：用于构建UI组件，继承于 Directive 类

属性指令(Attribute directive)：用于改变组件的外观或行为

结构指令(Structural directive)：用于动态添加或删除 DOM 元素来改变 DOM 布局

Angular 指令分类图

Angular 组件组成图

第一节 - 创建指令

在 Angular 中，我们可以使用 HostBinding 装饰器，实现元素的属性绑定。

指令的作用

该指令用于演示如何利用 HostBinding 装饰器，设置元素的 innerText 属性。

指令的实现

import { Directive, HostBinding} from '@angular/core'; @Directive({ selector: '[greet]' }) export class GreetDirective { @HostBinding() innerText = 'Hello, Everyone!'; } 指令的应用 import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <h2>Hello, Angular</h2> <h2 greet>Hello, Angular</h2> `, }) export class AppComponent { }

第二节 - 定义输入属性

为了能够让用户自定义 GreetDirective 指令的问候内容，我们需要使用 Input 装饰器去定义指令的输入属性。

指令的作用

该指令用于演示如何利用 Input 装饰器，定义指令的输入属性，从而实现让用户自定义问候内容。

指令的实现

import { Directive, HostBinding, Input } from '@angular/core'; @Directive({ selector: '[greet]' }) export class GreetDirective { @Input() greet: string; @HostBinding() get innerText() { return this.greet; } }

指令的应用

import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <h2>Hello, Angular</h2> <h2 [greet]="'Hello, Semlinker!'">Hello, Angular</h2> `, }) export class AppComponent { }

第三节 - 事件处理

在 Angular 中，我们可以使用 HostListener 属性装饰器，实现元素的事件绑定。

指令的作用

该指令用于演示如何利用 HostListener 装饰器，监听用户的点击事件。

指令的实现

import { Directive, HostBinding, HostListener, Input } from '@angular/core'; @Directive({ selector: '[greet]' }) export class GreetDirective { @Input() greet: string; @HostBinding() get innerText() { return this.greet; } @HostListener('click',['$event']) onClick(event) { this.greet = 'Clicked!'; } }

指令的应用

import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <h2>Hello, Angular</h2> <h2 [greet]="'Hello, Semlinker!'">Hello, Angular</h2> `, }) export class AppComponent { }

第四节 - 获取宿主元素属性值

在 Angular 中，我们可以通过 Attribute 装饰器来获取指令宿主元素的属性值。

指令的作用

该指令用于演示如何利用 Attribute 装饰器，获取指令宿主元素上的自定义属性 author 的值。

指令的实现

import { Directive, HostBinding, HostListener, Input, Attribute } from '@angular/core'; @Directive({ selector: '[greet]' }) export class GreetDirective { @Input() greet: string; @HostBinding() get innerText() { return this.greet; } @HostListener('click',['$event']) onClick(event) { this.greet = 'Clicked!'; console.dir(event); } constructor(@Attribute('author') public author: string) { console.log(author); } }

指令的应用

import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <h2>Hello, Angular</h2> <h2 [greet]="'Hello, Semlinker!'" author="semlinker">Hello, Angular</h2> `, }) export class AppComponent { }

第五节 - 使用 <ng-template> 元素

在 Angular 中，我们可以通过 ViewChild 装饰器来获取视图中定义的模板元素，然后利用 ViewContainerRef 对象的 createEmbeddedView() 方法，创建内嵌视图。