在Angular 11中的同级组件之间建立通信

在Angular应用程序中，组件是构建块。每个组件都有其自己的生命周期和功能。而在实际的应用中，我们经常需要在两个或多个组件之间建立通信。

在Angular中，在上级组件和下级组件之间建立通信通常是非常容易的。但是，在同级组件之间建立通信某些时候会更加困难，特别是在父组件之外，我们经常需要借助于服务进行通信。

下面，我们将讨论在同级组件之间建立通信的一些方法。

使用{ @Input() } 和{ @Output() }

在Angular中，同级组件之间的通信可以使用{ @Input() } 和{ @Output() } 进行传递数据。

在组件之间完成通信的原理是将数据从一个组件传递到另一个组件。 { @Input() } 和 { @Output() } 机制允许我们在同一级别组件之间共享数据。

• { @Input() }

{ @Input() } 允许父组件将数据传递给子组件。

首先，在父组件的类中声明一个变量作为{ @Input() }，如下所示：

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  @Input() message: any;
}

在子组件中，访问该变量是通过绑定（Binding）在HTML中完成的。 在子组件组件的对应 HTML中，我们通过点号来绑定和显示父组件中的这个变量

<p>Message from parent component: {{ message }}</p>

• { @Output() }

{ @Output() } 基本上就是通过在子组件内部发射事件通知父组件发生了一些事情，这样父组件就可以在这个事件上执行特定的操作，比如更改其自己的状态或向另一个组件传递数据。子组件在父组件内部注册该输出。从而可以将数据从子组件传递到父组件。

在组件内部定义并初始化 EventEmitter。 Emit函数将触发事件并将数据发送给父组件。我们使用@Output标记告诉 Angular 这个属性是个输出属性，父组件通过绑定事件接收这个输出。

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

@Component({
  selector: 'app-child',
  template: `
  <button (click)="sendMessage()">Send Message</button>
  `
})
export class ChildComponent {
  message: string = "Hello from Child Component";
  @Output() messageEvent = new EventEmitter<string>();
  sendMessage() {
    this.messageEvent.emit(this.message)
  }
}

在父组件HTML中使用方括号[]绑定到其它组件的输出属性, 当事件触发时，将调用接收事件的父组件方法

<app-child (messageEvent)="receiveMessage($event)"></app-child>

可以看到，我们在组件中定义了一个 { @Output() } 属性，并在函数 sendMessage() 中使用 emit() 方法发出了自定义事件名称 "messageEvent"，然后将要发送的消息一起传递了过去。

然后，在父组件HTML中使用 (messageEvent)="receiveMessage($event)" 触发来自自定义事件“messageEvent”的监听器并向其传递想要发送的信息。

最后，我们需要在父组件的.ts文件中定义 receiveMessage() 函数，然后通过它将消息显示在父组件页面上。这个函数接收消息并将其存储在父组件类的本地变量中。

export class ParentComponent {
  message: string;

  receiveMessage($event) {
    this.message = $event
  }
}

使用服务

在Angular中，服务允许组件之间进行通信。它们可以接受输入数据并返回输出数据。服务还可以处理各种异步操作，并使我们的组件轻量级和通用。

我们在应用程序的JavaScript源代码中创建服务，以便在整个应用程序的生命周期中使用这些服务。这意味着服务都是可注入的，并且可以提供给应用程序中的任何组件。

• 创建服务

在Angular中，通过从引导组件中提供这些服务来创建服务。

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor() { }
  
  public myMethod() {
    console.log('Message from service');
  }
}

在此示例中，我们创建了一个数据服务，并在其中定义了 myMethod() 方法。该方法输出一个消息。

接下来，我们在应用程序的引导组件（通常是 App.Module.ts）中向依赖注入器注册该服务。

语法是将服务提供者 Provider 导入到 App.Module.ts 文件中，然后将要提供的服务添加到 providers 数组中。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { DataService } from './data.service';

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  providers: [DataService],
  bootstrap: [AppComponent]
})
export class AppModule { }

• 注入服务

在组件中，我们首先需要将所需的服务导入导入：

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="onClick()">Click me!</button>
  `
})
export class AppComponent {

  constructor(private _dataService: DataService) { }

  onClick() {
    this._dataService.myMethod();
  }
}

在这里，我们导入测试数据服务并将其注入到我们需要使用它的组件中。 我们将其传递给组件的构造函数，并使用它来输出测试数据服务的消息。

总结

在Angular中，在同级组件之间建立通信通常需要借助于服务进行通信。当然，我们还可以使用 Input 和 Output 这两个基本装饰器。

总之，服务在 Angular 中是非常重要的，在开始使用同级组件进行通信之前，您需要首先学习如何使用它们。