角指令：$implicit变成任意的

Question

我有一个用于将数据作为局部变量共享到html组件模板中的结构指令：

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

interface LetContext<T> {
    myLet: T;
    $implicit: T;
}

@Directive({
    selector: '[myLet]'
})
export class LetDirective<T> {
    
    private context: LetContext<T | null> = { myLet: null, $implicit: null };
    private hasView: boolean = false;

    constructor(private viewContainer: ViewContainerRef, private templateRef: TemplateRef<LetContext<T>>) {}

    @Input()
    set myLet(value: T) {
        this.context.$implicit = this.context.myLet = value;
        if (!this.hasView) {
            this.viewContainer.createEmbeddedView(this.templateRef, this.context);
            this.hasView = true;
        }
    }
}

用法：

@Component({
  selector: 'app-root',
  template: `
  <ng-container *myLet="(num1 + num2) as total">
    <div>
      1: {{ total }} <!-- 3 -->
    </div>
    <div>
      2: {{ total }} <!-- 3 -->
    </div>
  </ng-container> 
  `,
})
export class AppComponent {
  num1: number = 1;
  num2: number = 2;
}

为什么当我检查Visual时，{{ total }}被转换为任何而不是数字？

Answer 1

指令需要包含静态方法ngTemplateContextGuard，它告诉编译器呈现模板的类型。

static ngTemplateContextGuard<T>(
  dir: LetDirective, ctx: unknown
): ctx is LetContext<T> { return true };