web-dev-qa-db-ja.com

角度で2つの子コンポーネント間で通信するにはどうすればよいですか？

私はangular 2。 @Inputアノテーション付き。

しかし、今では、1つの親コンポーネント（主にレイアウト用）と2つの子コンポーネントのレイアウトがあります。

example Layout

子コンポーネント2には多数のボタンがあり、単純なメッセージのみが作成されます。次に、このメッセージを子コンポーネント1に表示します。

どうすれば解決できますか？前もって感謝します

angularcomponents
13
Surras

@ViewChildおよび@Outputを使用して、子コンポーネントのプロパティを更新できます。

または、@Inputの代わりに@ViewChildを使用できます。

Seidmeによって提案されたアプローチもうまく機能します。ユースケースに依存します。

@ViewChildおよび@Outputを使用した例： https://plnkr.co/edit/r4KjoxLCFqkGzE1OkaQc?p=preview

@Inputおよび@Outputを使用した例 https://plnkr.co/edit/01iRyNSvOnOG1T03xUME?p=preview

8
JSNinja

@Input/@Outputと親コンポーネントを「ブリッジ」として使用するソリューションのほかに、共有サービスを導入する方法も一般的です。子がサービスの単一インスタンスを共有できるように、サービスは親コンポーネントで提供される必要があります（ シングルトンサービスをAngular 2？ で作成する方法）。

デリゲートとしてのBehaviorSubject を使用した基本的な例：

@Injectable()
export class SharedService {

    messageSource: BehaviorSubject<string> = new BehaviorSubject('');

    constructor() { }
}

子コンポーネント1：

export class ChildComponent1 {

    constructor(private _sharedService: SharedService) { }

    sendMessage(): void {
        this._sharedService.messageSource.next('Hello from child 1!');
    }
}

子コンポーネント2：

export class ChildComponent2 {

    constructor(private _sharedService: SharedService) {
        this._sharedService.messageSource.subscribe((message: string) => {
            console.log('Message: ', message); // => Hello from child 1!
        });
     }
}

この投稿も参照してください： Angular2-サービスを使用したコンポーネント間の相互作用

15
Seid Mehmedovic

簡単な方法は、子コンポーネント2の@Outputでイベントエミッターとして出力を設定し、ボタンがクリックされたときにデータとして渡されたメッセージでイベントを発行することです。次に、親コンポーネントでこのイベントをリッスンし、イベントが発生したときに子component1の入力として設定されているプロパティを更新します。

以下の画像は、メカニズムを明確に示した例です

Component-IO

10
Faly

テンプレート変数を使用して、兄弟を参照できます。

<child1 #child1></child1>
<child2 (someOutput)="child1.doSomething($event)"></child2>
9
Günter Zöchbauer