通过插值将字符串添加到 angular 模板中的元素

Question

假设我的模板中有三个这样的组件

<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 及更高版本中实现它吗？

Answer 1

我不确定这种方式是否可行，但我用其他方式做了类似的事情

在模板中添加

 <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 学生；所以你将始终创建相同的组件但分配不同的输入

Answer 2

为什么不使用@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>

通过插值将字符串添加到 angular 模板中的元素

add string by interpolation to element in angular template

typescript2.0

angular