通過插在角模板

添加字符串元素比方說，我有三個組成部分喜歡這裏的人，這些在我的模板通過插在角模板

<app-student-dave></app-student-dave> 
<app-student-olga></app-student-olga> 
<app-student-jason></app-student-jason>

現在我必須與所有這些名字的數組。因此，不要直接使用名稱，我想使用數組。類似這樣的：

<app-student-{{myArray[selectedName]}}></app-student-{{myArray[selectedName]}}>

但是字符串插值不能這樣工作。任何想法如何在angular2及以上實現這個？

來源

2017-09-03 Sheldon

爲什麼不使用@Input傳遞學生的名字？

你可以做這樣的事情

export class StudentComponent { 
@Input() studentName:string; 
//.... 
}

而且你可以使用它像這樣

<app-student [studentName]="dave"></app-student> 
    <app-student [studentName]="olga"></app-student> 
    <app-student [studentName]="jason"></app-student>

您可以進一步重構它，如果你有這樣的

studentNames:string[] = ['dave','olga','jason'];

數組並在你的模板中使用* ngFor。

<div *ngFor="let studName of studentNames> 
     <app-student [studentName]="studName"></app-student> 
    </div>

來源

2017-09-04 00:21:04 brijmcq

第二，這是因爲它支持角度設計方法，通過適當的模板來緩解DOM操作，正如本答案所示。 – Zze

好的，我對這個問題過於複雜。你的方法是要走的路，謝謝 – Sheldon

我不知道如果有可能這樣，但我在其他的方式也做了類似的事情

在模板添加

<ng-template #target></ng-template>

在組件代碼

@ViewChild("target", { read: ViewContainerRef }) target; 

private createComponent(type: Type<{}>) { 
    let compFactory = this.cfr.resolveComponentFactory(type); 
    return this.target.createComponent(compFactory); 
} 

private init(){ 
    this.target.clear(); 
    //loop here 
    var component = this.createComponent(StudentDave); 
    //here you can listen component.OnEvent.Subscribe 
    //Or even component.student = {name: "Olga", grade: 2}; 
}

但我認爲你的問題是有點錯了基本上你應該有1 StudentComponent哪些會接受@Input的學生;因此，您將始終創建相同的組件，但分配不同的輸入

來源

2017-09-04 00:03:44

通過插在角模板

回答

相關問題