如何向 angular 11 中的另一个不相关组件发送值？

Question

在 home 组件中，像...<app-root [message]="hii"> 这样的行正在打开该应用程序根组件，其值为在 html 中具有 @input 和 {{message}} 的应用程序根组件在职的..

但我需要重定向到该应用程序根组件，而不是在当前组件中打开。

像“按钮 onclick 以 [message]="hi" 作为数据的任何方式重定向到那个？

Answer 1

在 angular 中的不相关组件之间共享数据的最佳方式是使用 rxjs 库中的“BehaviorSubject”。

我们想象我们有两个完全不相关的组件，我们希望在它们之间共享数据。 首先，您应该创建一个服务文件。 假设我们有一个名为sharing-data.serice.ts 的服务：

 import { BehaviorSubject, Subject } from 'rxjs'; import { Injectable } from '@angular/core'; @Injectable({ providedIn:'root' }) export class SharingDataService { public subject = new BehaviorSubject(""); getDataFromFirstComponent(x){ this.subject.next(x); } sharedDataWithSecondComponent(){ return this.subject.asObservable(); } }

在这里，我们使用 BehaviorSubject class 在不相关的组件之间制作 pipe 以传输数据。

在第一个 component.ts 中，我们通过依赖注入注入服务，然后创建一个使用该服务的方法，并用数据填充 pipe：

 constructor( private service: SharingDataService, ) { } sendDataOutOftheComponent(){ this.service.getDataFromFirstComponent(this.dataFormFirst); }

现在在第二个组件中，我们只需要再次使用此服务，然后订阅获取数据的方法。 在第二个 component.ts 中，我们有以下代码：

 constructor( private service: SharingDataService, ) { } getDataFromFirstComponent(){ this.service.sharedDataWithSecondComponent().subscribe(data=>{ this.dataFromFirst= data; }) }

使用此方法，您可以轻松地在 angular 中不相关的组件之间共享数据