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 指令到 show/hide 组件二。我在这里录制了一个简短的视频来展示如何使用父组件作为中介来实现组件间通信：https://www.youtube.com/watch?v=tSXx4NoKEYY&t=3s

Angular 2 - 组件通信

Angular 2 - components communication

components

communication

input

output

angular