Question

我正在尝试获取一个角度指令实例，即使它尚未渲染。

例如，我有一个应用程序组件和baz指令。我想获得指令实例，即使它没有显示/呈现给dom。当然，我可以通过输入var来控制功能，但对我而言，访问实例并调用一些功能会更好/更容易。因此，它不仅应通过输入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。

希望有帮助！

即使未渲染也获得角度方向实例

1 个答案: