获取 angular-directive-instance 即使它没有被渲染

Question

我正在尝试获取 angular 指令实例，即使它尚未呈现。

例如，我有一个应用程序组件和 baz 指令。我想获取指令实例，即使它没有显示/呈现给 dom。当然，我可以通过输入 var 来控制功能，但在我的情况下，访问实例并调用一些功能会更好/更容易。所以它应该表现得像 NgIf*，不仅通过输入变量，而且通过实例函数调用。

所以我的问题是，即使实例未呈现，我该如何获取实例，或者是否有任何其他/更好的方法来处理这种情况？

import {Component, Directive, OnInit, TemplateRef, ViewChild, ViewContainerRef} from "@angular/core";

@Directive({selector: '[baz]'})
export class BazDirective
{
    constructor(protected view: ViewContainerRef, protected template: TemplateRef<any>)
    {
    }

    renderNow()
    {
        this.view.createEmbeddedView(this.template);
    }
}

@Component({
    selector: "app-root", templateUrl: "./app.component.html"
})
export class AppComponent implements OnInit
{
    @ViewChild(BazDirective) bar: BazDirective


    constructor()
    {
    }

    ngOnInit(): void
    {
        this.bar.renderNow();
    }
}

<div #bar *baz>foo</div>

Answer 1

是的，这是可能的，这取决于您所说的未渲染是什么意思。因为不可见并不意味着它没有被渲染。

使用结构指令，就像在您的示例中一样，您可以访问您的指令。这是一个活生生的例子：Stackblitz。如果您的指令确实未呈现（例如包装在 *ngIf 中），则情况并非如此。

并且在您的示例中，您不应在 html 元素上使用模板变量 #bar，因为您使用 @ViewChild() 定位 BazDirective。

希望对您有所帮助！

获取 angular-directive-instance 即使它没有被渲染

Get angular-directive-instance even though it´s not rendered

angular-directive

angular-components

angular