Question

我正在使用＆＃34;英雄之旅＆＃34;来学习Angular。应用程序。在multiple components part中，我们可以通过点击英雄名称来显示英雄详情。具有＆＃34; Hero Details＆＃34;的多个实例的设计模式（或实现）是什么？组件，所以当它被点击时，它会在每个英雄下动态显示？

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>
`

我的目标是拥有＆＃34; my-hero-detail＆＃34;每个＆＃34; li＆＃34;然后在单击名称时显示特定的英雄详细信息。

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>元素，因此样式会受到损坏。

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

1 个答案: