角度2の他の子コンポーネントの子コンポーネントの値にアクセスする方法

Question

「アプリケーションコンポーネント」という名前の親コンポーネントがあり、「子コンポーネント」という2つの子コンポーネントがある角度2のプロジェクトセットアップがあります。と 'child2コンポーネント'です。

私のプロジェクト構造は次のようになります。

app.component 
    -- child1 component 
    -- child2 component 

今、私の質問は：私は「child1のコンポーネントの中にボタンがあり、変数「variableOfChild2Componentは」 'child2のコンポーネントの中にあります。今すぐ 'child1 component's'のボタンをクリックすると、child2コンポーネントの変数値が変更されます。どのように角度2でこの要件を達成することができますか？

Answer 1

コンポーネントのやりとりについては、サービスに頼ってください。サービスのクイック名を使用しますが、使用例に意味のあるものを使用します。ボタンコンポーネントで今

. 
. 
. 
export class Component1 ... { 
    constructor(private myService: MyService) { } 

    buttonClick() { 
    this.myService.setData("Pass anything you want here"); 
    } 
} 

2クラスであなたのコンポーネント1で今すぐ

import { Subject } from 'rxjs'; 

@Injectable() 
export class MyService { 
    private dataMessenger = new Subject<any>(); 

    getData(): Subject<any> { 
    return this.dataMessenger; 
    } 

    setData(newData: any) { 
    this.dataMessenger.next(newData); 
    } 
} 

あなたは、たとえば、あなたのモジュールで MyServiceを登録する必要が

. 
. 
. 
export class Component2 ... { 
    variableOfChild2Component: any; 

    constructor(private myService: MyService) { } 

    ngOnInit() { 
    this.myService.getData() 
        .subscribe(data => { 
        // data argument contains whatever you pass to MyService.setData() 
        // function inside your Component1 class when the button is clicked 
        this.variableOfChild2Component = data; 
        }); 
    } 
} 

、AppModule

@NgModule({ 
    . 
    . 
    . 
    providers: [ ..., MyService, ... ] 
}) 
export class AppModule { }