Angular 4 指令快速入门教程

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

1. angular 4 +
2. angular cli
3. typescript

基础知识

angular cli 基本使用

安装 angular cli (可选)

npm install -g @angular/cli

创建新的项目

ng new project-name

启动本地服务器

cd project-name
ng serve

angular 指令简介

angular 的指令分为三种：

1. 组件(component directive)：用于构建ui组件，继承于 directive 类
2. 属性指令(attribute directive)：用于改变组件的外观或行为
3. 结构指令(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() 方法，创建内嵌视图。

import { component, templateref, viewcontainerref, viewchild, 
 afterviewinit } from '@angular/core';

@component({
 selector: 'app-root',
 template: `
  <ng-template #tpl>
   hello, semlinker!
  </ng-template>
 `,
})
export class appcomponent implements afterviewinit{
 @viewchild('tpl')
 tplref: templateref<any>;

 constructor(private vcref: viewcontainerref) {}

 ngafterviewinit() {
  this.vcref.createembeddedview(this.tplref);
 }
}

第六节 - 使用 ngtemplateoutlet 指令

ngtemplateoutlet 的作用

该指令用于基于已有的 templateref 对象，插入对应的内嵌视图。在应用 ngtemplateoutlet 指令时，我们可以通过 [ngtemplateoutletcontext] 属性来设置 embeddedviewref 的上下文对象。绑定的上下文应该是一个对象，此外可通过 let语法来声明绑定上下文对象属性名。

ngtemplateoutlet 的使用

import { component } from '@angular/core';

@component({
 selector: 'app-root',
 template: `
  <ng-template #stpl>
   hello, semlinker!
  </ng-template>
  <ng-template #atpl>
   hello, angular!
  </ng-template>
  <div [ngtemplateoutlet]="atpl"></div>
  <div [ngtemplateoutlet]="stpl"></div>
 `,
})
export class appcomponent { }

ngoutletcontext 的使用

import { component } from '@angular/core';

@component({
 selector: 'app-root',
 template: `
  <ng-template #stpl let-message="message">
   <p>{{message}}</p>
  </ng-template>
  <ng-template #atpl let-msg="message">
   <p>{{msg}}</p>
  </ng-template>
  <ng-template #otpl let-msg>
   <p>{{msg}}</p>
  </ng-template>
  <div [ngtemplateoutlet]="atpl"
   [ngoutletcontext]="context">
  </div>
  <div [ngtemplateoutlet]="stpl"
   [ngoutletcontext]="context">
  </div>
  <div [ngtemplateoutlet]="otpl"
   [ngoutletcontext]="context">
  </div>
 `,
})
export class appcomponent {
 context = { message: 'hello ngoutletcontext!', 
  $implicit: 'hello, semlinker!' };
}

第七节 - 创建结构指令

指令的功能

该指令实现 ngif 指令相反的效果，当指令的输入条件为 falsy 值时，显示dom元素。

指令的实现

import { directive, input, templateref, viewcontainerref } from '@angular/core';

@directive({
  selector: '[exeunless]'
})
export class unlessdirective {

  @input('exeunless')
  set condition(newcondition: boolean) {
    if (!newcondition) { 
      this.viewcontainer.createembeddedview(this.templateref);
    } else {
      this.viewcontainer.clear();
    }
  }

  constructor(private templateref: templateref<any>,
    private viewcontainer: viewcontainerref) {
  }
}

指令的应用

import { component } from '@angular/core';

@component({
 selector: 'app-root',
 template: `
  <h2 *exeunless="condition">hello, semlinker!</h2> 
 `,
})
export class appcomponent {
 condition: boolean = false;
}

我有话说

angular 中指令与组件有什么关系？

组件继承于指令，并扩展了与 ui 视图相关的属性，如 template、styles、animations、encapsulation 等。

结构指令中的 templateref 与 viewcontainerref 有什么作用？

templateref：用于表示内嵌的 template 模板元素，通过 templateref 实例，我们可以方便创建内嵌视图(embedded views)，且可以轻松地访问到通过 elementref 封装后的 nativeelement。需要注意的是组件视图中的 template 模板元素，经过渲染后会被替换成 comment 元素。

viewcontainerref：用于表示一个视图容器，可添加一个或多个视图。通viewcontainerref 实例，我们可以基于 templateref 实例创建内嵌视图，并能指定内嵌视图的插入位置，也可以方便对视图容器中已有的视图进行管理。简而言之，viewcontainerref 的主要作用是创建和管理内嵌视图或组件视图。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。