Angular 2 - 组件通信

Question

我是 Angular2 的新手，我正在努力理解 @Input 和 @Output 类型的东西。

例如，我有两个组件。我想要组件一中的一个按钮来切换组件二的可见性。

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

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