自定义Angular指令中微语法`as`失效：如何支持`foo$ | async as xyz`语法？

让我们一步步分析你遇到的问题，然后给出正确的实现方案：

问题根源 #

你当前的代码有两个核心问题导致xyz始终为undefined：

1. 未监听异步值的更新
   async管道是异步的，你的指令只在ngOnInit中创建一次视图，但当Observable（foo$）后续发射值时，appVar输入属性会变化，但指令没有响应这个变化，视图上下文也不会更新。

2. 上下文属性不匹配微语法的绑定规则
   Angular解析*appVar="foo$ | async as xyz"时，会将其转换为：

   <ng-template [appVar]="foo$ | async" let-xyz="appVar">
     <p> Value is {{ xyz }}! </p>
   </ng-template>
   

   也就是说，模板中的xyz变量是绑定到指令上下文的appVar属性，而你之前只设置了$implicit属性，所以xyz无法拿到对应的值。

正确的指令实现 #

我们需要修改指令来处理异步值的更新，并提供匹配微语法规则的上下文：

import { Directive, Input, TemplateRef, ViewContainerRef, EmbeddedViewRef } from '@angular/core';

@Directive({ selector: '[appVar]' })
export class VarDirective<T> {
  // 保存视图引用，方便后续更新上下文
  private viewRef: EmbeddedViewRef<{ $implicit: T; appVar: T }> | null = null;

  // 使用setter监听appVar的变化，包括async管道的异步更新
  @Input() set appVar(value: T) {
    if (!this.viewRef) {
      // 第一次创建视图时，初始化上下文：同时提供$implicit（支持let语法）和appVar（支持as语法）
      this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef, {
        $implicit: value,
        appVar: value
      });
    } else {
      // 当值更新时，修改上下文的属性
      this.viewRef.context.$implicit = value;
      this.viewRef.context.appVar = value;
      // 标记视图需要进行变更检测，确保模板更新
      this.viewRef.markForCheck();
    }
  }

  constructor(
    private templateRef: TemplateRef<{ $implicit: T; appVar: T }>,
    private viewContainer: ViewContainerRef
  ) {}
}

为什么这样能解决问题？ #

• setter监听输入变化：每次async管道发射新值，appVar的setter都会被触发，确保我们能及时更新视图上下文。
• 上下文属性匹配绑定规则：上下文同时包含$implicit和appVar属性，既支持let x的语法，也支持as xyz的语法，完美适配Angular的微语法解析规则。
• 手动触发变更检测：修改上下文后调用markForCheck()，确保Angular检测到上下文变化并更新模板。

现在你再运行你的示例代码，xyz就能正确获取到foo$发射的值了！

内容的提问来源于stack exchange，提问作者Jeanluca Scaljeri