Angular 结构指令上下文模板类型检查

Question

我似乎无法使 Angular 模板自动完成工作，谁能帮助我了解我遗漏了什么或做错了什么？

<div *ngVar="ok as xd">
    <!-- xd is not giving any autocomplete / typecheck, hover giving "any" type -->
    {{ xd.item }}
</div>

我几乎继续使用 ngIf 和 async 管道源代码，试图了解发生了什么，并制定了这个简单的指令只是为了通过异步订阅来促进我的生活(这对于 ngIf 来说有点痛苦。
没有类型安全同样是一种痛苦 x)

type NgVarContext<T> = { ngVar: T; $implicit: undefined };

@Directive({
    selector: "[ngVar]",
})
export class NgVar<T> {
    context: NgVarContext<T> = { ngVar: undefined, $implicit: undefined };
    _subscription: Subscription;

    constructor(
        private cdr: ChangeDetectorRef,
        template: TemplateRef<NgVarContext<T>>,
        viewContainer: ViewContainerRef
    ) {
        viewContainer.createEmbeddedView(template, this.context);
    }

    @Input()
    set ngVar(input: Observable<T>) {
        if (this._subscription) return;
        this._subscription = input.subscribe((item) => {
            if (item !== this.context.ngVar) {
                this.context.ngVar = item;
                this.cdr.markForCheck();
            }
        });
    }

    static ngTemplateGuard_ngVar: "binding";

    static ngTemplateContextGuard<T>(dir: NgVar<T>, ctx: NgVarContext<T>): ctx is NgVarContext<T> {
        return true;
    }
}

Answer 1

如果你不知道(写这个作为答案，因为我不能评论 <50 声望):如果你在 vscode 中启用实验性 Ivy 语言服务，这已经对我有用:基本上与此处编写的实现相同。

见:https://twitter.com/angular/status/1357403631901937672