Angular 2 - 组件通信

Posted 2023-02-23

【中文标题】Angular 2 - 组件通信

【英文标题】：Angular 2 - components communication

【发布时间】：2017-11-28 20:23:38

【问题描述】：

我是 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 变量以显示或隐藏它。

【问题讨论】：

如果这两个组件不是父子关系，那么一种方法是使用它们可以通过它们进行通信的服务。总的来说，我建议您阅读描述不同选项的这部分文档：angular.io/guide/component-interaction

【参考方案1】：

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

【讨论】：

谢谢！很棒的视频。我会告诉你我怎么走的:)

如果您使用 Angular CLI，则无需像视频中显示的那样对 Stock 界面进行这些特殊安排。