如果元素是动态创建的，以编程方式将[ngClass]添加到主机元素的正确方法是什么？

Question

我已经动态创建了元素

initElem() {
let childElFactory = this._cfRes.resolveComponentFactory(childElCmp);
// _cfRes is ComponentFactoryResolver
let childElRef = this._vcRef.createComponent(childElFactory);
// _vcRef is ViewContainerRef
childElRef.instance.childElModel = someModel;
}

我要添加

[ngClass]="{active: childElModel.active}"

attribiute和

#childEl

归属于childElCmp的主机元素。

我不想使用elementRef，因为它不是正确的方法。 我认为渲染器是我正在寻找的，但我不知道如何以正确的方式使用它。

Answer 1

您无法将[ngClass]...或任何其他绑定应用于动态添加的组件。

您可以添加

@HostBinding('class.active') isActive:boolean = false;

进入动态添加的组件，然后使用

childref.instance.isActive = true;

要从组件中添加/删除active类。

或者您可以将ElementRef注入父组件并使用

elementRef.nativeElement.querySelector('child-el').classList.add('active');