Как ссылаться элемент для создания динамической составляющей в Angular2

Question

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

Я хочу создать динамический компонент ссылочного атрибута [ID].

Answer 1

Почему вы не создаете новый компонент и не встраиваете его в свой *ngFor и передаете его в новый компонент через @Input()?

Answer 2

Вы можете создать службу:

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

Теперь создать компонент виджет, который принимает идентификатор и посылает запрос на перечисленные выше услуги, чтобы получить виджет:

@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); 
 
    } 
 
    
 
}

Используя интерфейс для передачи информации в качестве виджета интерфейса здесь ..

export interface IWidget { 
 
    componentName : string 
 
}

Теперь изменить код, чтобы принять WidgetComponent внутри * 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"} 
 
     ] 
 
    } 
 
}