如何实现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`服务，并注入到组件的构造函数中。

typescriptimport { Component, OnInit } from '@angular/core';import { SharedService } from './shared.service';

@Component({ selector: 'app-receiver', template: `{{ message }}`})export class ReceiverComponent implements OnInit { message: string;

constructor(private sharedService: SharedService) {}

ngOnInit() { this.sharedService.getMessage().subscribe((msg)=> { this.message=msg; }); }}

3. 在发送消息的组件中调用服务：当需要在其他组件中发送消息时，只需调用`SharedService`中的`setMessage`方法即可。

typescriptimport { Component } from '@angular/core';import { SharedService } from './shared.service';

@Component({ selector: 'app-sender', template: ``})export class SenderComponent { constructor(private sharedService: SharedService) {}

sendMessage() { this.sharedService.setMessage('Hello from sender!'); }}

通过以上示例，我们可以看到，非父子组件之间可以通过服务实现通讯。在实际项目中，你可以根据需求调整服务的实现方式和组件的调用方式。希望这篇文章能对你有所帮助！

Angular中非父子组件间怎么通讯？本篇文章给大家介绍一下Angular非父子组件之间通过服务通讯的方法，希望对大家有所帮助！

其实提到父子组件之间传值，对我们来说，再熟悉不过了，在业务实现过程中很常见。

但是我在实现的过程中涉及到跨级了（也就是非父子组件之间传值），是的，我可以一层一层地往上传递，在父组件中拿到子组件的传值，那有没有更好的方式呢？

需求背景：

有一个子组件，可以理解为第三级组件，该组件中有个下拉框，当点击某个li标签的时候，需要将相应选中的值传给第一级组件，同时，一级组件带着接收到的值请求列表接口，进而刷新数据。

最初思路：

当时想着通过localstorage将用户选中的值保存下来，在使用的组件中，再通过localstorage将值取出来，拿着该值请求接口；但是，无法做到实时，用户选中后，没有触发我在父组件中获取数据，也就是子组件中的值改变了，如何通知到父组件。

技术点：

Angular父组件和子组件通过服务来通讯

父组件和它的子组件共享同一个服务，利用该服务在组件家族内部实现双向通讯。

该服务实例的作用域被限制在父组件和其子组件内。这个组件子树之外的组件将无法访问该服务或者与它们通讯。

原理

父组件和它的子组件共享同一个服务，利用该服务在组件家族内部实现双向通讯。

该服务实例的作用域被限制在父组件和其子组件内。这个组件子树之外的组件将无法访问该服务或者与它们通讯。 服务是子组件与父组件之间的桥梁，因为服务可以很方便的注入到其它的组件当中，又因为Subject对象可以将数据多播（传递）给订阅了这个对象的组件，因此结合Angular中的service和Rxjs中的Subject可以很方便的实现组件间的数据通讯。

实现：

在该子组件中创建一个service文件，代码如下：

import { Injectable } from '@angular/core'; import { Subject } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class HeaderActionService { public pageTenantMode = new Subject<string>(); // 获得一个Observable; missionConfirmed$ = this.pageTenantMode.asObservable(); constructor() {} setParams(params) { this.pageTenantMode.next(params); } }

子组件数据层调用上述方法，将值传进去。

this.tenantModeService.setParams（）

父组件调用的地方注入上述服务，代码如下：

headerModeService.missionConfirmed$.subscribe( () => { this.mode = headerModeService.pageTenantMode; this.initTableData(); } );

更多编程相关知识，请访问：编程入门！！