angular2，如何多次显示同一个组件

Question

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

我尝试过的：

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

所有选项都新鲜出炉。什么都欢迎！

Answer 1

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

假设您有 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>

Answer 2

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

@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

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

updating variable changes in components from a service with angular2
https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

angular2，如何多次显示同一个组件

angular2, how to show the same component more than once

typescript

angular

angular2-routing