angular2、同じコンポーネントを複数回表示する方法

Question

複数のステップコンポーネントを持つウィザードコンポーネントがあります。これらのステップはウィザードコンポーネントによってルーティングされ、ウィザード自体はルートコンポーネントからルーティングされます。ウィザードの最後のステップとして、ナビゲーション中に入力されたすべてのデータを見直すために、すべてのナビゲートされたステップを一度に表示する必要があります。どうすればこれを達成できますか？各ステップのコンポーネントと使用Angular2注入プロバイダに

1. 追加@Injectable()を、しかし、関係なく、私が試したものを、それは常に新しいインスタンスをインスタンス化しないと、すべてのデータ項目は次のとおりです。私が試したものを

   行った。

2. 周囲にハードコードされた参照を渡します。ひどく悪い習慣だけでなく、ありがたいことに、コンポーネントドメイン外のプロトタイププロパティにアクセスできないため、うまくいきませんでした。

すべてのオプションが新鮮です。何でも歓迎です！

Answer 1

サービスでデータを管理し、コンポーネントクラスではなくサービスにビューをバインドすると、各コンポーネントは同じデータを表示します。より複雑なデータとサービスを使用する方法については

Plunker example

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

も

• updating variable changes in components from a service with angular2

• https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

見ます

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