Блог

Главная - Вопросы по программированию - Как правильно добавить [ngClass] к элементу хоста программно, если элемент был создан динамически?

Как правильно добавить [ngClass] к элементу хоста программно, если элемент был создан динамически?

#angular #shadow-dom

#angular #shadow-dom

Вопрос:

У меня есть динамически созданный элемент

 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, поскольку это неправильный способ. Я думаю, что средство визуализации — это то, что я ищу, но я не знаю, как правильно его использовать.

Ответ №1:

Вы не можете применить [ngClass]... или любую другую привязку к динамически добавляемому компоненту.

Вы можете добавить

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

в ваш динамически добавляемый компонент, а затем использовать

 childref.instance.isActive = true;

Чтобы active добавить / удалить класс из компонента.

Или вы можете внедрить ElementRef в родительский компонент и использовать

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

Комментарии:

1. Спасибо. @HostBinding — это то, что я искал.

2. При использовании объектной модели или массива в качестве входных данных вашего компонента вам также необходимо расширить doCheck для обновления ваших данных.

3. Подходит ли подход с nativeElement? Потому что я узнал, что манипулирование DOM с nativeElement помощью следует считать плохим

4. Само по себе это не так уж плохо. Это зависит от ваших требований. Если вы хотите использовать рендеринг на стороне сервера или функцию Angulars WebWorker, это, вероятно, вызовет проблемы, в противном случае по-прежнему рекомендуется избегать доступа к элементам nativeElement , если это возможно, только потому, что это не способ использования Angular. Однако Angular не предоставляет никакого API для чтения из DOM, и иногда это неизбежно, тогда вам, вероятно, придется обращаться к членам nativeElement .