在Angular中動態創建的自定義組件上設置屬性

Question

我有一個屬於自定義庫的組件：

<my-icon>

為了具有圖標，我應該設置此組件的屬性[name] 。 像這樣：

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

我正在用TypeScript創建這些圖標：

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

我應該如何在變量icon中設置屬性[name]才能獲得與上述相同的結果？ 我已經嘗試過icon.setAttribute('name','warning')但是它不起作用（設置HTML屬性name ，而不是基礎Angular組件的輸入name 。

Answer 1

document.create不會創建Angular組件，而只會創建DOM元素。 如果要動態創建Angular組件，則應注入ComponentFactoryResolver服務

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