不同模块的组件功能之间的通信

Posted 2023-02-22

【中文标题】不同模块的组件功能之间的通信

【英文标题】：Communicating between different module's component function

【发布时间】：2020-10-30 21:01:26

【问题描述】：

我有两个组件 ComponentA 和 ComponentB。这两个组件在不同的模块中声明。现在我想从 ComponentB 调用 ComponentA 函数。这两个组件没有父子关系。

export class ComponentA
 randomfun()
 console.log('random function entered');
 

constructor(private comA: ComponentA)
export class ComponentB
// calling component A function
comA.randomfun();

此代码导致 StaticInjectorError(AppModule)[ComponentB -> ComponentA]

【问题讨论】：

使用服务在组件之间进行通信：angular.io/guide/…（在订阅函数中，调用组件的函数）。啊!女巫模块中的每一个都定义了它是无关紧要的

我没听懂最后一句话。

对不起我的英语，我想说组件可以在不同的模块中，也可以不在（都是一样的）

【参考方案1】：

您可以使用shared singleton service：

  @Injectable(
      providedIn: 'root'
    )
    export class SharedService 
        private _invokeSource: Subject<void> = new Subject<void>();
        public invokeObservable: Observable<void> = this._invokeSource.asObservable();
        public invoke(): void 
            this._invokeSource.next();
    
    

组件 A：

[...]this.sharedService.invoke();

组件 B：

[...]

private _subscription: Subscription;
this._subscription = this.sharedService.invokeObservable.subscribe(() => this.randomfun())

此外，为避免内存泄漏，您应该在ngOnDestroy() 期间取消订阅自定义可观察对象：

public ngOnDestroy()
    this._subscription.unsubscribe();

演示：https://stackblitz.com/edit/angular-shared-service-invoke

请注意，如果您尝试调用其方法的组件未加载到 dom 中，这将不起作用。在这种情况下，您将不得不创建组件类的实例并在其上调用方法（尽管我永远不建议这样做）。

【讨论】：

randomfun 在类型“ComponentB”上不存在。你能提供任何工作演示吗

randomfun() 显然是您要调用的任何方法。我添加了一个详细的演示来展示这种方法。