Comment passer un objet D'un composant à un autre en angle 2?

pour la liaison unidirectionnelle de données de parent à enfant, utiliser le décorateur @Input (comme recommandé par le guide de style) pour spécifier une propriété d'entrée sur le composant enfant

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

et utiliser un modèle de propriété de liaison dans le modèle parent

<child [model]="parentModel"></child>

puisque vous passez un objet (un type de référence JavaScript) toute modification que vous apporterez aux propriétés de l'objet dans le parent ou le composant enfant sera les deux composantes ayant une référence au même objet. Je le montre dans le Plunker .

si vous réassignez l'objet dans le composant parent

this.model = someNewModel;

Angular propagera la référence du nouvel objet vers le composant enfant (automatiquement, dans le cadre de la détection de changement).

la seule chose que vous ne devriez pas faire est de réassigner l'objet dans le composant enfant. Si si vous faites cela, le parent référencera toujours l'objet original. (Si vous avez besoin de données bidirectionnelles, voir https://stackoverflow.com/a/34616530/215945 ).

@Component({
  selector: 'child',
  template: `<h3>child</h3> 
    <div>{{model.prop1}}</div>
    <button (click)="updateModel()">update model</button>`
})
class Child {
  @Input() model: any;   // instead of any, specify your type
  updateModel() {
    this.model.prop1 += ' child';
  }
}

@Component({
  selector: 'my-app',
  directives: [Child],
  template: `
    <h3>Parent</h3>
    <div>{{parentModel.prop1}}</div>
    <button (click)="updateModel()">update model</button>
    <child [model]="parentModel"></child>`
})
export class AppComponent {
  parentModel = { prop1: '1st prop', prop2: '2nd prop' };
  constructor() {}
  updateModel() { this.parentModel.prop1 += ' parent'; }
}

Plunker - Angular RC.2

vous pouvez également stocker vos données dans un service avec un setter et l'obtenir sur un getter

import { Injectable } from '@angular/core';

@Injectable()
export class StorageService {

    public scope: Array<any> | boolean = false;

    constructor() {
    }

    public getScope(): Array<any> | boolean {
        return this.scope;
    }

    public setScope(scope: any): void {
        this.scope = scope;
    }
}

utiliser l'annotation de sortie

@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: `
    <interval-dir (everySecond)="everySecond()" (everyFiveSeconds)="everyFiveSeconds()">
    </interval-dir>
  `,
  directives: [IntervalDir]
})
class App {
  everySecond() { console.log('second'); }
  everyFiveSeconds() { console.log('five seconds'); }
}
bootstrap(App);