角度2コンポーネントコミュニケーション

Question

私はAngular2を初めて使っています。私は@Inputと@Outputタイプのものを頭に浮かべています。

例として、2つのコンポーネントがあります。コンポーネント2の可視性を切り替えるには、コンポーネント1のボタンが必要です。

import { Component, Input, Output, EventEmitter} from '@angular/core'; 

@Component({ 
selector: 'widget-one', 
template:'<div class="widget-one" (click)="sendToWidgetTwo()"><button>Send to widget two</button></div>'}) 

export class WidgetOne { 

    constructor(){ 
    console.log('Hello Widget One'); 
    } 

    sendToWidgetTwo(){ 
    console.log("button clicked"); 
    // communicate with widget two 
    } 

} 

---

import { Component, Input, Output, EventEmitter} from '@angular/core'; 

@Component({ 
    selector: 'widget-two', 
    template:'<div *ngIf="showing" class="widget-two">{{msg}}</div>' 
}) 
export class WidgetTwo { 

    msg = "hello widget two"; 
    showing = true; 

    constructor(){ 
    console.log('Hello Widget Two'); 
    } 

} 

---

私はそれを表示または非表示にするWidgetTwoのshowing変数を切り替えるWidgetOneのボタンをしたいです。

Answer 1

両方のコンポーネントに共通の親がある場合、最初のコンポーネントは、2番目のコンポーネントの可視性を切り替えるために、親のブール値varを設定するイベントを生成する必要があります。親のテンプレートでは、このブール変数にバインドされた* ngIfディレクティブを使用して、コンポーネント2を表示/非表示にします。