Wie überführe ich ein Objekt in Angular 2 von einer Komponente zur anderen?

Question

Ich habe Eckige Komponenten und erste Komponente verwendet die zweite als Direktive. Sie sollten das gleiche Modell Objekt teilen, die in der ersten Komponente initialisiert wird. Wie kann ich dieses Modell an die zweite Komponente übergeben?

Answer 1

Komponente 2, die Direktivitätskomponente kann eine Eingabeeigenschaft definieren (@input Annotation in Typescript). Und Komponente 1 kann diese Eigenschaft an die Direktive-Komponente übergeben.

siehe SO diese How to do inter communication between a master and detail component in Angular2?

beantworten und wie wird eingegeben geordneten Komponenten weitergegeben werden. In Ihrem Fall ist es eine Richtlinie.

Answer 2

für unidirektionale Datenbindung von Eltern auf Kinder, verwenden, um den @Input decorator (als recommended vom Style Guide) mit einem Eingang Eigenschaft auf der Kind-Bindungskomponente

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

und verwendet Vorlage Eigenschaft angeben, in der Eltern Vorlage

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

da Sie ein Objekt vorbei (ein JavaScript-Referenz-Typ) alle Änderungen, die Sie Objekte im übergeordneten Objekt oder das Kind Komponente in der anderen Komponente reflektiert werden, da b Beide Komponenten haben eine Referenz auf das gleiche Objekt. Ich zeige dies in der Plunker.

Wenn Sie neu zuweisen, das Objekt in der übergeordneten Komponente

this.model = someNewModel; 

Angular wird das neue Objekt Bezug auf die untergeordnete Komponente (automatisch als Teil der Änderungserkennung) propagieren.

Das einzige, was Sie nicht tun sollten, ist das Objekt in der untergeordneten Komponente neu zuzuweisen. Wenn Sie dies tun, wird das übergeordnete Objekt weiterhin auf das ursprüngliche Objekt verweisen. (Wenn Sie eine bidirektionale Datenbindung benötigen, siehe 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

Answer 3

Verwenden Sie die Ausgabe-Annotation

@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); 

Answer 4

Sie Ihre Daten auch in einem Dienst mit einem Setter speichern könnte und es über einen Getter bekommen

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; 
    } 
}