angular2，如何多次显示相同的组件答案

【问题标题】：angular2, how to show the same component more than onceangular2，如何多次显示相同的组件
【发布时间】：2016-04-21 22:35:01
【问题描述】：

我有一个包含多个步骤组件的向导组件，这些步骤由向导组件路由到，向导本身从根组件路由到。作为向导的最后一步，我需要一次显示所有导航步骤，以便查看导航时输入的所有数据。我怎样才能做到这一点？

我尝试过的：

在每个步骤组件中添加了@Injectable()，并使用了Angular2注入提供程序，但无论我尝试过什么，它总是实例化一个新实例，所有数据条目都消失了。
传递硬编码引用。不仅糟糕而且糟糕的做法，谢天谢地，它不起作用，因为您无法访问组件域之外的原型属性。

所有新鲜的选项。欢迎任何东西！

【问题讨论】：

标签： typescript angular angular2-routing

【解决方案1】：

在服务中维护您的数据并将视图绑定到服务而不是组件类，然后每个组件将显示相同的数据。

@Injectable()
class SharedData {
  name:string;
}

@Component({
  selector: 'wiz-step1',
  template`
<input type="text" [(ngModel)]="sharedData.name">
`})
export class WizStep1 {
  constructor(private sharedData:SharedData) {}
}

@Component({
  selector: 'my-app',
  directives: [WizStep1],
  providers: [SharedData],
  template`
<wiz-step1></wiz-step1>
<wiz-step1></wiz-step1>
`})
export class AppComponent {}

Plunker example

有关如何使用具有更复杂数据的服务，另请参阅

【讨论】：

【解决方案2】：

我会让组件模型驱动（数据驱动）和重用实现。

假设您在每个步骤中有 2 个步骤和 1 个输入，因此您可以创建模型：

private steps = [
     {
       description: 'step 1',
       value: '0'
     },
     {
       description: 'step 2',
       value: '1'
     }
]

显示每个步骤：

component.model = this.steps[currentStep];

<component [model]="steps[currentStep]"></component>

<input [(ngModel)]="model.value">

显示所有步骤：

<component [model]="steps[1]"></component>

【讨论】：