自定义结构指令语法“as”不起作用

Question

我创建了一个结构指令来在没有数据时显示加载器，但是我无法使“as”语法工作（即asyncData$ | async as data）。

我创建了一个StackBlitz 示例。

在这里，当您单击按钮时，它会将数据发送到BehaviorSubject。

如果我使用ngIf，它可以工作，但不适用于我自己的指令。

<pre *loader="name | async as b">
  !{{ b | json }}!
</pre>

<hr>
ngIf

<pre *ngIf="name | async as b">
  !{{ b | json }}!
</pre>

<br>

<button (click)="handler()">Load data</button>

---

这个问题被认为是“离题”，但事实并非如此。

我创建了一个示例代码。它不起作用，同时显示了我解决问题的尝试。问题完全与代码本身有关。

Answer 1

使用时需要传递context才能查看

this.vc.createEmbeddedView(this.templateRef);

为了做到这一点，你可以在指令中定义一个context 变量：

@Directive({
  selector: '[loader]'
})
export class LoaderDirective {
    constructor(
        private readonly templateRef: TemplateRef<any>,
        private readonly vc: ViewContainerRef,
        private readonly resolver: ComponentFactoryResolver
    ) {
    }

    context: any = {};

    /** True - контент, false - лоадер */
    @Input('loader')
    set show(c: boolean) {
        if (c) {
            this.vc.clear();
            this.context.$implicit = this.context.loader = c;
            this.vc.createEmbeddedView(this.templateRef, this.context);
        } else {
            this.vc.clear();
            const comp = this.vc.createComponent(this.factory);
        }
    }

    private get factory() {
        return this.resolver.resolveComponentFactory(LoaderComponent);
    }
}

注意context 的$implicit 和loader 属性是分开分配的。这意味着您可以将任何带有context 的属性传递给视图。

希望这会有所帮助。