如果元素是动态创建的，以编程方式将 [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]...对动态添加的组件应用或任何其他绑定。

你可以加

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

到您动态添加的组件中，然后使用

childref.instance.isActive = true;

要获取active类添加/部件中删除。

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

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