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

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

Answer 2

我不确定它是否可能这样，但我以其他方式做了类似的事情

在模板中添加

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

在组件代码中

StudentComponent

但我认为你的问题有点不对，基本上你应该有1 {{1}}接受@Input学生;因此，您将始终创建相同的组件，但分配不同的输入

通过插值为角度模板中的元素添加字符串

2 个答案: