如何在Angular2中引用元素以创建动态组件

Question

<div *ngFor="let w of widgets">
    <div #elem [id]="w.componentName"></div>
</div>

I want to create dynamic component by reference attribute [id] .

Answer 1

为什么不创建一个新组件并嵌入到*ngFor ，并通过@Input()将ID传递到新组件中呢？

Answer 2

You can create a service :

 @Injectable() export class WidgetService { getWidget(id) : IWidget { // return your constructed widget instead return {componentName : id}; } } 

Now create a widget component that takes in ID and sends request to the above service to get widget :

 @Component({ selector: 'widget', template: ` <div> <h2>{{data.componentName}}</h2> </div> `, providers: [WidgetService] }) export class WidgetComponent implements OnInit{ @Input() id: string; data: IWidget; constructor(private wService : WidgetService) {} ngOnInit() { this.data = this.wService.getWidget(this.id); } } 

Using interface to pass information as widget interface here..

 export interface IWidget { componentName : string } 

Now modify your code to accept WidgetComponent inside *ngFor :

 @Component({ selector: 'my-app', template: ` <div *ngFor="let w of widgets"> <widget [id]="w.componentName"></widget> </div> `, }) export class App { widgets:IWidget[]; constructor() { this.widgets = [ {componentName : "w1"}, {componentName : "w2"}, {componentName : "w3"} ] } }