通过插在角模板

添加字符串元素比方说，我有三个组成部分喜欢这里的人，这些在我的模板通过插在角模板

<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

通过插在角模板

回答

相关问题