Angular 指令组合 API—— hostDirectives

前言

有一种场景是给动态创建组件添加指令，当时可难坏了，因为 createComponent API 不支持绑定指令，所以我当时猜想是否可以在 @Component 注入或 @HostBindingDirective 绑定实现呢？找了很久，最终发现官方支持了这种，选择的是前者，Feature Issue 如下：

具体详情： github.com/angular/ang…

Angular 指令组合 API—— hostDirectives

简介

hostDirectives 是以依赖注入（ @Component 装饰器）的方式给宿主绑定指令，该特性于 Angular 15 支持。

基本使用：

    @Component({
      selector: 'app-demo',
      template: '<div></div>',
      hostDirectives: [CdkDrag]
    })
    export class DemoComponent {}

等价于

    <app-demo cdkDrag></app-demo>

有些类似 host 属性（或 @HostBinding('class') className = 'active' ）和 <div class='active'></div> 的关系。

需要注意的点

Angular 会在编译时静态应用宿主指令。不能在运行时动态添加指令。
hostDirectives 中使用的指令必须是 standalone: true 。
Angular 会忽略 hostDirectives 属性中所应用的那些指令的 selector 。

Angular 指令组合 API—— hostDirectives

还有个小区别是，hostDirectives 添加的指令不会给 dom 元素加上属性，不过这并不影响效果。

Angular 指令组合 API—— hostDirectives

指令支持输入（属性）与输出（事件）

创建一个指令

    import { Directive, EventEmitter, Input, OnInit, Output, ViewContainerRef } from '@angular/core';

    @Directive({
      selector: '[one]',
      exportAs: 'one',
      standalone: true
    })
    export class DirectiveOne implements OnInit {
      @Input() public name: string;

      @Output() nameChange = new EventEmitter();

      constructor(private viewContainer: ViewContainerRef) {}

      ngOnInit(): void {
        console.log('one input name: ' + this.name);
        this.viewContainer.element.nativeElement.style = 'color: red;';
        setTimeout(() => {
          this.nameChange.emit('one name output');
        }, 1000);
      }
    }

组件使用指令添加输入输出参数

    @Component({
      selector: 'app-demo',
      standalone: true,
      imports: [DirectiveOne],
      hostDirectives: [
        {
          directive: DirectiveOne,
          inputs: ['name'],
          outputs: ['nameChange']
        }
      ],
      template: `脱我战时袍，著我旧时裳`,
    })
    export class DemoComponent {}

使用组件绑定输入属性和事件返回


    import { Component, Input } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { bootstrapApplication } from '@angular/platform-browser';
    import { DemoComponent } from './demo.component';

    @Component({
      selector: 'my-app',
      imports: [CommonModule, DemoComponent],
      standalone: true,
      template: `
        <app-demo [name]="name" (nameChange)="change($event)"></app-demo>
      `,
    })
    export class App {
      @Input() name = 'Angular app';

      change(value) {
        console.log(value);
      }
    }

效果显示：

Angular 指令组合 API—— hostDirectives

给输入/输出起别名

    {
          directive: DirectiveOne,
          inputs: ['name: Name'],
          outputs: ['nameChange: NameChange']
    }

<app-demo [Name]="name" (NameChange)="change($event)"></app-demo>

指令中引入另一个指令

方便理解，我把这种叫做指令嵌套或指令继承

指令 DirectiveTwo

    import { Directive } from '@angular/core';
    import { DirectiveOne } from './directive-one';

    @Directive({
      selector: '[two]',
      standalone: true,
      exportAs: 'two',
      hostDirectives: [DirectiveOne]
    })
    export class DirectiveTwo {}

组件使用指令

    import { Component, Input } from '@angular/core';
    import { DirectiveTwo } from './directive-two';

    @Component({
      selector: 'app-demo',
      standalone: true,
      imports: [DirectiveTwo],
      hostDirectives: [DirectiveTwo],
      template: `脱我战时袍，著我旧时裳`,
    })
    export class DemoComponent { }

指令嵌套的执行顺序

以上述为例，大体的执行顺序为： DirectiveOne -> DirectiveTwo 。

加上每个指令生命钩子后的顺序为： DirectiveOne constructor（初始化）-> DirectiveTwo constructor（初始化）-> DirectiveOne ngOnInit -> DirectiveTwo ngOnInit ...... 等等， 这个顺序意味着后续的指令可以修改前面指令对宿主元素的操作 。

示例如下：

DirectiveOne

import { Directive, EventEmitter, Input, OnInit, Output, ViewContainerRef } from '@angular/core';

    @Directive({
      selector: '[one]',
      exportAs: 'one',
      standalone: true,
    })
    export class DirectiveOne implements OnInit {
      @Input() public name: string;
      @Output() nameChange = new EventEmitter();
      constructor(private viewContainer: ViewContainerRef) {
        console.log('one constructor');
      }
      ngOnInit(): void {
        console.log('one ngOnInit');
        // console.log('one input name: ' + this.name);
        this.viewContainer.element.nativeElement.style = 'color: red;';
        setTimeout(() => {
          this.nameChange.emit('one output');
        }, 1000);
      }
    }

DirectiveTwo

import { Directive, EventEmitter, Input, OnInit, Output, ViewContainerRef } from '@angular/core';
    import { DirectiveOne } from './directive-one';

    @Directive({
      selector: '[two]',
      standalone: true,
      exportAs: 'two',
      hostDirectives: [
        {
          directive: DirectiveOne,
          inputs: ['name'],
          outputs: ['nameChange']
        }
      ]
    })
    export class DirectiveTwo implements OnInit {
      @Input() public name = '';
      @Output() nameChange = new EventEmitter();
      constructor(private viewContainer: ViewContainerRef) {
        console.log('two constructor');
      }
      ngOnInit(): void {
        console.log('two ngOnInit');
        // 覆盖宿主元素
        this.viewContainer.element.nativeElement.innerHTML += '；<span>当窗理云鬓，对镜帖花黄</span>。';
        this.viewContainer.element.nativeElement.style = 'color: red; background-color: yellow;';
      }
    }

组件使用指令

    import { Component } from '@angular/core';
    import { DirectiveTwo } from './directive-two';

    @Component({
      selector: 'app-demo',
      standalone: true,
      imports: [DirectiveTwo],
      hostDirectives: [
        {
          directive: DirectiveTwo,
          inputs: ['name'],
          outputs: ['nameChange']
        }
      ]
      template: `脱我战时袍，著我旧时裳`
    })
    export class DemoComponent {
      constructor() {
        console.log('demo constructor');
      }

      ngOnInit() {
        console.log('demo ngOnInit');
      }
    }

使用组件

    @Component({
      selector: 'my-app',
      imports: [CommonModule, DemoComponent],
      standalone: true,
      template: `
        <app-demo [name]="name" (nameChange)="change($event)"></app-demo>
      `,
    })
    export class App {
      @Input() name = 'Angular app';
    }

效果展示：

Angular 指令组合 API—— hostDirectives