Установить атрибут динамически созданного пользовательского компонента в Angular

Question

У меня есть компонент, принадлежащий пользовательской библиотеке:

<my-icon>

Чтобы иметь значок, я должен установить свойство [name] этого компонента. Как то так:

<my-icon [name]='warning'></my-icon>

Я динамически создаю эти значки с помощью TypeScript:

if (myCondition) {
    let icon = <HTMLElement>document.createElement('my-icon');
}

Как мне установить свойство [name] в моей переменной icon, чтобы получить тот же результат, что и выше? Я пробовал icon.setAttribute('name','warning'), но он не работает (это устанавливает атрибут HTML name, а не ввод name базового компонента Angular.

Answer 1

document.create не создает угловой компонент, а только элемент DOM. Если вы хотите динамически создать Angular-компонент, вы должны внедрить ComponentFactoryResolver service

constructor(private componentResolver: ComponentFactoryResolver) { }

, который позже можно использовать следующим образом:

// create factory for icon component
const factory = this.componentResolver.resolveComponentFactory(MyIconComponent);

// create icon component and append it next to anchor element
const icon = this.anchor.createComponent(factory);

// assign some value to component input
icon.instance.name = 'icon name';

Элемент привязки может быть получен с использованием ViewChild, например. если ваш шаблон компонента выглядит так:

`<div #iconsHere></div>`

вам нужно будет добавить следующую аннотацию:

  @ViewChild('iconsHere', {read: ViewContainerRef}) anchor: ViewContainerRef;

Обратите внимание, что динамически созданные компоненты должны быть объявлены как входные компоненты в вашем модуле.

@NgModule({
  ...
  entryComponents: [ MyIconComponent ]
})
export class AppModule { }

Демо-версия: https://stackblitz.com/edit/angular-jukjib