角结构指令上下文模板类型检查 [英] Angular structural directive context template type checking

问题描述

我似乎无法使角度模板自动完成工作，任何人都可以帮助我了解我遗漏了什么或做错了什么吗?

I can't seem to make angular template autocomplete work, can anyone help me out understanding what am I missing or doing wrong?

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

我几乎一直在研究ngIf和异步管道源代码，试图了解发生了什么，并做了一个简单的指令，只是为了方便我的异步订阅(这对于ngIf来说是很痛苦的.
缺乏类型安全性同样令人痛苦(x)

I pretty much went on the ngIf and async pipe source code trying to understand what was going on and made this simple directive just to facilitate my life with async subscriptions (which are kind of a pain with the ngIf.
Not having type safety is equally a pain tho 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;
    }
}

推荐答案

是我，OP

该指令没有问题.

问题在于角度语言服务尚未更新以推断出这些类型(他们最近宣布支持常春藤，所以我希望这可以在几个月内生效).

The problem is that the angular language service is not updated yet to infer those types (they announced it supporting ivy recently, so this should work in a few months I hope).

我将在解决问题后更新答案.

I will update the answer when it is fixed.

这篇关于角结构指令上下文模板类型检查的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！