Angular中Exported Directive Context（导出指令上下文）是什么及如何工作？

指令上下文（Directive Context） #

• 定义：就是你编写的指令类的实例，指令的所有属性、方法、依赖都存储在这个实例中，是指令功能的核心载体。
• 工作原理：Angular编译模板时，一旦识别到指令，就会自动创建对应指令类的实例，并将这个实例与目标DOM元素绑定。模板里对指令属性的绑定、事件的关联，本质上都是在和这个实例交互。

举个简单例子：

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  // 指令上下文的属性
  @Input() highlightColor: string = 'yellow';

  constructor(private el: ElementRef) {}

  // 指令上下文的方法
  applyHighlight() {
    this.el.nativeElement.style.backgroundColor = this.highlightColor;
  }
}

模板使用：

<!-- [highlightColor]直接绑定到HighlightDirective实例的属性 -->
<div appHighlight [highlightColor]="'blue'"></div>

这个HighlightDirective的实例就是指令上下文，指令的所有逻辑都围绕它运行。

导出指令上下文（Exported Directive Context） #

• 定义：把指令的实例（即指令上下文）暴露给模板的其他部分，让组件模板里的其他元素（比如按钮、同级组件）能直接访问指令的属性和方法。实现这一点需要在指令的@Directive装饰器中通过exportAs属性指定导出名称。
• 工作原理：当指令设置了exportAs后，你可以在模板里用#引用名="导出名称"的方式创建模板引用变量，这个变量直接指向指令的实例。之后就能通过这个变量调用指令的方法、读写属性。

修改上面的指令添加exportAs：

@Directive({
  selector: '[appHighlight]',
  exportAs: 'highlight' // 指定导出名称
})
export class HighlightDirective {
  @Input() highlightColor: string = 'yellow';

  constructor(private el: ElementRef) {}

  applyHighlight() {
    this.el.nativeElement.style.backgroundColor = this.highlightColor;
  }

  removeHighlight() {
    this.el.nativeElement.style.backgroundColor = 'transparent';
  }
}

模板使用：

<!-- #myHighlight="highlight" 将指令实例赋值给myHighlight变量 -->
<div appHighlight #myHighlight="highlight" [highlightColor]="'blue'"></div>
<!-- 点击按钮时，通过myHighlight调用指令的removeHighlight方法 -->
<button (click)="myHighlight.removeHighlight()">移除高亮</button>

这里的myHighlight就是导出后的指令上下文，让模板里的按钮能直接操作指令的功能。

一句话区分 #

指令上下文是指令自身的“内部核心”，支撑指令本身的功能；导出指令上下文是把这个核心“对外开放”，让模板里的其他元素能直接调用指令的能力。

内容的提问来源于stack exchange，提问作者Jay Bansod