Angular的模板是动态的。在渲染的时候，会根据指令给出的指示对DOM进行转换。指令是一个带有@Directive装饰器的类。

组件型指令

通过官方文档我们可以知道@Component继承了@Directive，因此Angular中的组件其实是一种特殊的扩展指令，它在指令的基础上扩展了模板相关的内容。

结构型指令

结构型指令通过、移除或替换DOM元素来修改布局。
常见的结构型指令有： *ngIf 、 *ngFor 

  1. <li *ngFor="let hero of heroes"></li>
  2. <app-hero-detail *ngIf="selectedHero"></app-hero-detail>
  1. import { Component } from '@angular/core';
  2. // Defines example component and associated template
  3. @Component({
  4.  selector: 'example',
  5.  template: `
  6.  <div *ngFor="let f of fruit"> {{f}} </div>
  7.  <select required>
  8.  <option *ngFor="let f of fruit" [value]="f"> {{f}} </option>
  9.  </select>
  10.  `
  11. })
  12. // Create a class for all functions, objects, and variables
  13. export class ExampleComponent {
  14.  // Array of fruit to be iterated by *ngFor
  15.  fruit = ['Apples', 'Oranges', 'Bananas', 'Limes', 'Lemons'];
  16. }
  1. <div>Apples</div>
  2. <div>Oranges</div>
  3. <div>Bananas</div>
  4. <div>Limes</div>
  5. <div>Lemons</div>
  6. <select required>
  7.  <option value="Apples">Apples</option>
  8.  <option value="Oranges">Oranges</option>
  9.  <option value="Bananas">Bananas</option>
  10.  <option value="Limes">Limes</option>
  11.  <option value="Lemons">Lemons</option>
  12. </select>

属性型指令

  1. <div [class.active]="isActive"></div>
  2. <span [style.color]="'red'"></span>
  3. <p [attr.data-note]="'This is value for data-note attribute'">A lot of text here</p>

自定义指令

  1. import { Directive, ElementRef, Renderer } from '@angular/core';
  3. @Directive({
  4.   selector: '[green]'
  5. })
  6. export class GreenDirective {
  7.   constructor(private _elementRef: ElementRef,
  8.                private _renderer: Renderer) {
  9.     _renderer.setElementStyle(_elementRef.nativeElement, 'color', 'green');
  10.   }
  11. }

使用方法：

  1. <p green>A lot of green text here</p>

自定义指令测试

  1. import { Directive, ElementRef, HostListener, Input } from '@angular/core';
  2. @Directive({
  3.   selector: '[appHighlight]'
  4. })
  5. export class HighlightDirective {
  6.   @Input('appHighlight') // tslint:disable-line no-input-rename
  7.      highlightColor: string;
  9.   constructor(private el: ElementRef) { }
  11.     @HostListener('mouseenter')
  12.      onMouseEnter() {`
  13.          this.highlight(this.highlightColor || 'red');
  14.      }
  16.   @HostListener('mouseleave')
  17.      onMouseLeave() {
  18.          this.highlight(null);
  19.      }
  20.      private highlight(color: string) {
  21.          this.el.nativeElement.style.backgroundColor = color;
  22.      }
  23. }

测试代码如下：

  1. import { ComponentFixture, ComponentFixtrueAutoDetect, TestBed } from '@angular/core/testing';
  3. import { Component } from '@angular/core';
  4. import { HighlightDirective } from './highlight.directive';
  6. @Component({
  7.   selector: 'app-test-container',
  8.   template: `
  9.     <div>
  10.         <span id="red" appHighlight>red text</span>
  11.         <span id="green" [appHighlight]="'green'">green text</span>
  12.         <span id="no">no color</span>
  13.     </div>
  14. `
  15. })
  16. class ContainerComponent {}
  18. const mouseEvents = {
  19.   get enter() {
  20.     const mouseenter = document.createEvent('MouseEvent');
  21.     mouseenter.initEvent('mouseenter', true, true);
  22.     return mouseenter;
  23.   },
  24.   get leave() {
  25.       const mouseleave = document.createEvent('MouseEvent');
  26.     mouseleave.initEvent('mouseleave', true, true);
  27.     return mouseleave;
  28.   }
  29. };
  31. describe('HighlightDirective', () => {
  32.   let fixture: ComponentFixture<ContainerComponent>;
  33.   let container: ContainerComponent;
  34.   let element: HTMLElement;
  36.   beforeEach(() => {
  37.     TestBed.configureTestingModule({
  38.       declarations: [ContainerComponent, HightlightDirective],
  39.       providers: [
  40.         { provide: ComponentFixtureAutoDetect, useValue: true}
  41.       ]
  42.     });
  44.     fixture = TestBed.createComponent(ContainerComponent);
  45.     container = fixture.componentInstance;
  46.     element = fixture.nativeElement;
  47.   });
  49.   it('should set background-color to the empty when mouse leaves with directive without arguments', () => {
  50.       const targetElement = <HTMLSpanElement>element.querySelector('#red');
  52.     targetElement.dispatchEvent(mouseEvents.leave);
  53.     expect(targetElement.style.backgroundColor).toEqual('');
  54.   });
  56.   it('should set background-color to the empty when mouse leaves with directive with arguments', () => {
  57.       const targetElement = <HTMLSpanElement>element.querySelector('#green');
  59.     targetElement.dispatchEvent(mouseEvents.leave);
  60.     expect(targetElement.style.backgroundColor).toEqual('');
  61.   });
  63.   it('should set background-color red with no args passed', () => {
  64.       const targetElement = <HTMLSpanElement>element.querySelector('#red');
  66.     targetElement.dispatchEvent(mouseEvents.enter);
  67.     expect(targetElement.style.backgroundColor).toEqual('red');
  68.   });
  70.   it('should set background-color green when passing green parameter', () => {
  71.       const targetElement = <HTMLSpanElement>element.querySelector('#green');
  73.     targetElement.dispatchEvent(mouseEvents.enter);
  74.     expect(targetElement.style.backgroundColor).toEqual('green');
  75.   });
  76. });

自定义结构指令

官方的unless示例：

  1. import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
  3. @Directive({ selector: '[appUnless]'})
  4. export class UnlessDirective {
  5.   private hasView = false;
  7.   @Input()
  8.   set appUnless(condition: boolean) {
  9.       if (!condition && !this.hasView) {
  10.       this.viewContainer.createEmbeddedView(this.templateRef);
  11.       this.hasView = true;
  12.     } else if (condition && this.hasView) {
  13.       this.viewContainer.clear();
  14.       this.hasView = false;
  15.     }
  16.   }
  18.   constructor(
  19.        private templateRef: TemplateRef<any>,
  20.      private viewContainer: ViewContainerRef) { }
  22. }

使用unless

  1. <p *appUnless="condition" class="unless a">
  2.   (A) This paragraph is displayed because the condition is false.
  3. </p>
  5. <p *appUnless="!condition" class="unless b">
  6.   (B) Although the condition is true,
  7.   this paragraph is displayed because appUnless is set to false.
  8. </p>

通过上面的示例，我们可以看到创建结构型指令需要用到TemplateRef，ViewContainerRef。然后通过在ViewContainerRef中创建、删除TemplateRef，来控制是否选择指令标记的dom内容。结构型指令通过*号语法来使用。

参考unless的例子，我们可以结合实际需求场景，创建一个控制按钮权限的指令。

  1. import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
  3. @Directive({ selector: '[hasBtnRole]'})
  4. export class BtnRoleDirective {
  6.   private ROLE_CODES = ['btn_1', 'btn_2'];
  8.   @Input()
  9.   set hasBtnRole(btnCode: string) {
  10.       if (!!btnCode && ROLE_CODES.includes(btnCode)) {
  11.       this.viewContainer.createEmbeddedView(this.templateRef);
  12.     } else {
  13.       this.viewContainer.clear();
  14.     }
  15.   }
  17.   constructor(
  18.        private templateRef: TemplateRef<any>,
  19.      private viewContainer: ViewContainerRef) { }
  21. }