如何实现Angular中非父子组件间的通信机制？

本文共计1221个文字，预计阅读时间需要5分钟。

Angular中非父子组件间如何通讯？本文将为大家介绍一种Angular非父子组件间通过服务通讯的方法，希望对大家有所帮助！

其实，提到父子组件间传值，大家可能第一时间想到的是@Input()和@Output()，但这对父子组件来说非常实用，对于非父子组件，我们通常会采用服务（Service）来实现。

服务是一种单例模式，在Angular中，它被设计为一种解耦组件的方式，允许组件之间通过服务进行通信。下面是一个简单的示例：

1. 创建一个服务：首先，我们创建一个名为`SharedService`的服务，该服务将包含一个可以被任何组件访问的方法。

typescriptimport { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root'})export class SharedService { message='';

setMessage(msg: string) { this.message=msg; }

getMessage() { return this.message; }}

2. 在非父子组件中使用服务：接下来，在需要接收消息的组件中，引入`SharedService`服务，并注入到组件的构造函数中。