角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

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