在角应用程序中插入同一组件的多个副本

Question

我正在学习角使用“英雄之旅”应用程序。在多分量部分中，我们可以通过单击英雄名称来显示英雄的详细信息。什么是设计模式(或实现)有多个实例的“英雄细节”组件，所以它是动态地显示在每个英雄之下，当它被点击？

template: `
  <h1>{{title}}</h1>
  <h2>My Heroes</h2>
  <ul class="heroes">
    <li *ngFor="let hero of heroes"
      [class.selected]="hero === selectedHero"
      (click)="onSelect(hero)">
      <span class="badge">{{hero.id}}</span> {{hero.name}}
    </li>
  </ul>
  <my-hero-detail [hero]="selectedHero"></my-hero-detail>
`

我的目标是在每个"li“中都有”我的英雄-细节“元素，然后在单击名称时用该特定的英雄细节来显示它。

Answer 1

您可以多次使用<my-hero-detail>：

<ul class="heroes">
  <li *ngFor="let hero of heroes; let i=index"
    [class.selected]="hero === selectedHero"
    (click)="selectedHeroes[i] = !selectedHeroes[i]">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
    <my-hero-detail [hero]="hero" [style.display]="selectedHeroes[i] ? 'block' : 'none'"></my-hero-detail>
  </li>
</ul>

然后，如果您想要隐藏/显示细节，您必须更新selectedHeroes以包含每个英雄的真/假值，指示它是否应该是可见的。

selectedHeroes: Object = {};

参见演示：http://plnkr.co/edit/nG0RkwR2kmr6AXzln6mU?p=info

注意，样式被破坏了，因为<li>不希望包含<my-hero-detail>元素。