时间戳

首页 > 解决方案 > 获取角度指令实例，即使它没有被渲染

angular - 获取角度指令实例，即使它没有被渲染

问题描述

我试图获得一个角度指令实例，即使它尚未呈现。

例如，我有一个 app-component 和 baz-directive。即使没有显示/呈现给dom，我也想获取指令实例。当然，我可以通过输入 var 来控制功能，但在我的情况下，访问实例并调用一些函数会更好/更容易。所以它的行为应该类似于 NgIf*，不仅通过输入 var，而且通过实例函数调用。

所以我的问题是，即使它没有被渲染，我如何获得实例，或者是否有任何其他/更好的方法来处理这种情况？

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>

标签： angularangular-directiveangular-components

解决方案

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

使用结构指令，就像在您的示例中一样，您可以访问您的指令。这是一个活生生的例子：Stackblitz。如果您的指令真的没有被渲染（例如包装在 *ngIf 中），情况并非如此。

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

希望能帮助到你！

推荐阅读