angular - 如果元素是动态创建的，以编程方式将 [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}"

属性和

#childEl

归属于 childElCmp 的宿主元素。

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

Answer 1

您不能将 [ngClass]... 或任何其他绑定(bind)应用于动态添加的组件。

可以添加

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

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

childref.instance.isActive = true;

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

或者你可以将ElementRef注入(inject)父组件并使用

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