Angular 2 - 两个兄弟组件之间的通信 - Javascript

在 Angular 2 中，组件之间的通信是一个非常重要的主题。在这个教程中，我们将学习如何在两个兄弟组件之间进行通信。

为什么需要组件之间的通信？

当我们构建一个复杂的 Angular 2 应用程序时，应用程序中的组件数量可能会非常多。有时，我们需要在不同的组件之间共享数据或通知另一个组件进行某些操作。这时，就需要组件之间的通信。

兄弟组件之间的通信

在 Angular 2 中，兄弟组件之间可以通过共享一个父级组件来进行通信。这可以通过父组件中暴露的公共属性或方法来实现。

假设我们有两个兄弟组件 Component1 和 Component2，它们都是 ParentComponent 的子组件。现在，我们想要在 Component1 中的按钮被点击时通知 Component2。下面是实现的步骤：

1. 确定需要共享的数据

在这个例子中，我们需要共享一个布尔值，表示按钮是否被点击。所以我们可以在 ParentComponent 中定义一个公共布尔属性。

import { Component } from '@angular/core';

@Component({
  selector: 'parent-comp',
  template: `
    <component1 (buttonClick)="onButtonClick($event)"></component1>
    <component2 [buttonClicked]="buttonClicked"></component2>
  `
})
export class ParentComponent {
  buttonClicked = false;
  
  onButtonClick(clicked: boolean) {
    this.buttonClicked = clicked;
  }
}

2. 声明 Output() 和 Input() 属性

在 Component1 中，我们需要声明一个 Output() 属性来发出一个事件，当按钮被点击时，通知 ParentComponent。在 Component2 中，我们需要声明一个 Input() 属性来接收 ParentComponent 中共享的数据。

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'component1',
  template: `
    <button (click)="onClick()">Click me</button>
  `
})
export class Component1 {
  @Output() buttonClick = new EventEmitter<boolean>();

  onClick() {
    this.buttonClick.emit(true);
  }
}

import { Component, Input } from '@angular/core';

@Component({
  selector: 'component2',
  template: `
    <div *ngIf="buttonClicked">Button clicked</div>
  `
})
export class Component2 {
  @Input() buttonClicked: boolean;
}

3. 将子组件添加到父组件中

现在，我们需要将 Component1 和 Component2 添加到 ParentComponent 中，以便它们可以共享同一个父级组件。

import { Component } from '@angular/core';

@Component({
  selector: 'parent-comp',
  template: `
    <component1 (buttonClick)="onButtonClick($event)"></component1>
    <component2 [buttonClicked]="buttonClicked"></component2>
  `
})
export class ParentComponent {
  buttonClicked = false;
  
  onButtonClick(clicked: boolean) {
    this.buttonClicked = clicked;
  }
}

现在，当 Component1 中的按钮被点击时，我们可以在 Component2 中看到一个文本。

总结

在这个教程中，我们学习了如何在 Angular 2 中实现兄弟组件之间的通信。我们学习了如何使用 Input() 和 Output() 属性来共享数据和发出事件。这个技术将帮助我们构建更加复杂和灵活的 Angular 2 应用程序。