Получить экземпляр angular-directive-экземпляра, даже если он не отображается

Question

Я пытаюсь получить экземпляр угловой директивы, даже если он еще не визуализирован.

Например, я получил компонент приложения и директиву baz.Я хочу получить экземпляр директивы, даже если он не показывается / не отображается в dom.Конечно, я мог контролировать функциональность с помощью ввода var, но в моем случае было бы лучше / проще получить доступ к экземпляру и вызвать некоторые функции.Так что он должен вести себя как NgIf * не только через input 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>

Answer 1

Да, это возможно, это зависит от того, что вы имеете в виду, когда не отображается.Поскольку невидимое не означает, что оно не визуализируется.

Со структурной директивой, как в вашем примере, вы можете получить доступ к своей директиве.Вот живой пример: Stackblitz .Это не тот случай, если ваша директива полностью не визуализируется (например, обернуть в * ngIf).

И в вашем примере вам не следует использовать переменную шаблона #bar в вашем HTML-элементе, потому что вынацеливание на BazDirective с помощью @ViewChild ().

Надеюсь, это поможет!