Angular 2 - 组件通信

Question

我是Angular2的新手，我试图让我的头围绕@Input和@Output类型的东西。

作为一个例子，我有两个组件。我想在组件1中使用一个按钮来切换组件2的可见性。

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

}

---

我希望WidgetOne的按钮切换WidgetTwo的showing变量来显示或隐藏它。

Answer 1

如果两个组件都具有公共父组件，则第一个组件应发出一个事件，该事件将在父组件中设置boolean var以切换第二个组件的可见性。在父模板中使用绑定到此布尔变量的* ngIf指令来显示/隐藏组件二。我已经录制了一个简短的视频来展示如何使用父组件作为调解器来实现组件间通信：https://www.youtube.com/watch?v=tSXx4NoKEYY&t=3s