Angular 11 在服务的不相关组件之间共享数据答案

【问题标题】：Angular 11 share data between unrelated components which a serviceAngular 11 在服务的不相关组件之间共享数据
【发布时间】：2021-02-05 17:03:46
【问题描述】：

我正在使用 Angular 11，并且我在 componentB 中有很多方法（以一种方式称呼它）

我现在必须从 componentA 调用许多存在于 componentB 中的方法。

我知道我可以将所有方法转移到服务中，但在这种情况下，工作量很大，我只需要一个快速的解决方法。

所以我想保持 componentB 的状态，并且能够从 componentA 调用它的方法。

componentA 和 componentB 不相关。

是否有一种解决方法可以做到这一点，而不必将方法移出 componentB？

【问题讨论】：

标签： angular angular11

【解决方案1】：

您可以通过服务来完成，这将被注入到两个组件中服务可以是这样的

@Injectable()
class MyDataService implements IMyDataService  {
 
    private whenMessageRecieved$: Subject<MyDataType> =
        new ReplaySubject(1);
 
    constructor(
    ) {
    }
 
    public notify(someData: MyDataType): void {
        this.whenMessageRecieved$.next(someData);
    }
 
    public whenMessageRecieved(): Observable<MyDataType> {
        return this.whenMessageRecieved$.asObservable();
    }
}

ComponentB 应该订阅 whenMessageRecieved() 并且 componentA 应该使用严格的参数调用 notify。在不久的将来，此服务将帮助您从 componentB 迁移方法

但仍然 - 最好将通用逻辑存储在其他地方，而不是在组件 B 中

【讨论】：

是否可以使用上面的代码执行从位于 componentB 中的 componentA 调用的方法？
@ojy2021 您可以将方法的签名从 componentB 复制到服务，或者只使用 config 创建单个方法并通过它调用 componentB 方法。喜欢notify({ method: "methodName1", args: [] });。而componentB 可能是这样的：serviceExample.whenMessageRecieved().subscribe(event => { /* validation */ this[event.method].call(this, event.args);
@ojy2021 在组件A 中调用serviceExample.notify({ method: "methodName1", args: [] });