Como passar um object de um componente para outro no Angular 2?

Eu tenho componentes angulares e primeiro componente usa o segundo como uma diretiva . Eles devem compartilhar o mesmo object de modelo, que é inicializado no primeiro componente. Como posso passar esse modelo para o segundo componente?

Componente 2, o componente diretivo pode definir uma propriedade de input (anotação @input em Typescript). E o componente 1 pode passar essa propriedade para o componente diretivo do modelo.

Veja esta resposta SO Como fazer a intercomunicação entre um componente mestre e um detalhe em Angular2?

e como a input está sendo passada para componentes filhos. No seu caso, é diretiva.

Para binding de dados unidirecional de pai para filho, use o @Input decorator (conforme recomendado pelo guia de estilo) para especificar uma propriedade de input no componente filho.

 @Input() model: any; // instead of any, specify your type 

e usar a vinculação de propriedade de modelo no modelo pai

  

Como você está passando um object (um tipo de referência JavaScript), qualquer alteração feita nas propriedades do object no pai ou no componente filho será refletida no outro componente, pois ambos os componentes têm uma referência ao mesmo object. Eu mostro isso no Plunker .

Se você reatribuir o object no componente pai

 this.model = someNewModel; 

Angular propagará a nova referência de object para o componente filho (automaticamente, como parte da detecção de alterações).

A única coisa que você não deve fazer é reatribuir o object no componente filho. Se você fizer isso, o pai ainda fará referência ao object original. (Se você precisar de binding de dados bidirecional, consulte https://stackoverflow.com/a/34616530/215945 ).

 @Component({ selector: 'child', template: `

child

{{model.prop1}}
` }) class Child { @Input() model: any; // instead of any, specify your type updateModel() { this.model.prop1 += ' child'; } } @Component({ selector: 'my-app', directives: [Child], template: `

Parent

{{parentModel.prop1}}
` }) export class AppComponent { parentModel = { prop1: '1st prop', prop2: '2nd prop' }; constructor() {} updateModel() { this.parentModel.prop1 += ' parent'; } }

Plunker – Angular RC.2

você também pode armazenar seus dados em um serviço com um setter e obtê-lo em um getter

 import { Injectable } from '@angular/core'; @Injectable() export class StorageService { public scope: Array | boolean = false; constructor() { } public getScope(): Array | boolean { return this.scope; } public setScope(scope: any): void { this.scope = scope; } } 

Use a anotação de saída

 @Directive({ selector: 'interval-dir', }) class IntervalDir { @Output() everySecond = new EventEmitter(); @Output('everyFiveSeconds') five5Secs = new EventEmitter(); constructor() { setInterval(() => this.everySecond.emit("event"), 1000); setInterval(() => this.five5Secs.emit("event"), 5000); } } @Component({ selector: 'app', template: `   `, directives: [IntervalDir] }) class App { everySecond() { console.log('second'); } everyFiveSeconds() { console.log('five seconds'); } } bootstrap(App);