Angular 2でオブジェクト間でオブジェクトを渡す方法は？

Question

私は角成分を有し、第1成分は指令として第2成分を使用する。 同じモデルオブジェクトを共有する必要があります。これは最初のコンポーネントで初期化されます。 そのモデルを2番目のコンポーネントに渡すにはどうすればよいですか？

Answer 1

コンポーネント2では、ディレクティブコンポーネントは入力プロパティ（Typescriptの@input注釈）を定義できます。また、コンポーネント1はそのプロパティをテンプレートからのディレクティブコンポーネントに渡すことができます。

が、これはSO How to do inter communication between a master and detail component in Angular2?

とどのように入力が子コンポーネントに渡されているにお答えください。あなたの場合、それは指示です。親から子への結合一方向データについて

Answer 2

、子コンポーネント

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

の入力プロパティを指定し、内結合テンプレートプロパティを使用する（スタイルガイドによってrecommendedとして）@Inputデコレータを使用親テンプレート

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

オブジェクト（JavaScriptの参照タイプ）を使用すると、他のコンポーネントに反映される親または子コンポーネントのプロパティオブジェクトに加えた変更を渡しているので、B以来o番目のコンポーネントは同じオブジェクトへの参照を持ちます。私はこれをPlunkerに示します。

ます（変化検出の一環として、自動的に）子コンポーネントへの新しいオブジェクト参照を伝播します

this.model = someNewModel; 

角度親コンポーネント内のオブジェクトを再割り当てした場合。

唯一行うべきことは、オブジェクトを子コンポーネントに再割り当てすることです。これを行うと、親は引き続き元のオブジェクトを参照します。 （双方向データバインディングが必要な場合は、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 - 角度RC.2

Answer 3

あなたもセッターとサービスにデータを格納し、ゲッターの上にそれを得ることができ、出力注釈

@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

を使用します

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