Angular：如何从不同模块中的另一个组件调用组件方法答案

【问题标题】：Angular: How to call component method from another component in different modulesAngular：如何从不同模块中的另一个组件调用组件方法
【发布时间】：2018-05-02 22:51:14
【问题描述】：

我正在尝试从 B_Module 拥有的 B_Component 调用 A_Module 拥有的 A_Component 方法，并且在将 A_Component 作为参数添加到 B_Component 构造函数后立即收到以下错误：

NullInjectorError：没有 A_Component 的提供者！

编辑：这两个组件不是父/子。它们的模块由 app.module 导入

（为简洁起见，代码汇总）

A_Module：

import { A_Component } from '...'

@NgModule({
    imports: [...],
    declarations: [A_Component],
    exports: [A_Component],
})

export class A_Module { }

B_模块：

import { A_Module } from '...'
import { B_Component } from '...'

@NgModule({
    imports: [A_Module],
    declarations: [B_Component]
})

export class B_Module { }

A_组件：

export class A_Component {
    someMethod() {...}
}

B_组件：

import { A_Component } from '...'

export class B_Component {

    constructor(public a_Component: A_Component)) {} //this param causes error

    callSomeMethod() {
        this.a_Component.someMethod();
    }
}

这不是如何跨模块调用组件方法吗？做到这一点的唯一方法是使用服务吗？

【问题讨论】：

在您使用 B 组件的视图/模板中，a_component 是 B 组件的父级吗？ Afaik，如果您将一个组件注入另一个组件，Angular 注入器将通过从子组件被实例化的点沿 DOM 树向上移动来查找该另一个组件。换句话说，它将查看 A_Component 是否是 B 组件的父组件，如果不是，它将查看它是否是其父组件的父组件，依此类推。如果它们在您的视图（DOM）中没有这样的关系，它将不知道如何注入它。分享你使用组件的代码！
@diopside 这两个组件不是父子组件。这两个模块都由 app.module 导入。你是对的，我在构造函数中注入组件的唯一其他时间是当组件是子组件的父组件时。我以为我也可以使用非父/子组件来做到这一点。
是的，不幸的是，文档并没有使 Angular 的这一部分变得清晰。
@Alex Angular 方式是一种共享服务。这是制作每个组件和独立项目的要点，也是编译时优化的一部分。
因为这个问题有点关于模块交互。有很酷的文章可以让你更好地理解模块的作用域 - medium.com/@cyrilletuzi/…

标签： angular

【解决方案1】：

请参考components interaction官方文档。

您只能调用使用ViewChild 在组件内声明的组件的方法。

如果你想让两个不同的组件相互交互-应该这样做via common service。

在@diopside 的点之后更新

【讨论】：

他们肯定可以，而且它是 Angular 最有用的功能之一！
这里有一个简单的例子来说明它有多强大/有用 - blog.thoughtram.io/angular/2015/04/09/…
@diopside 你是对的。不知道这种方法。但是，对我来说，它看起来有点“颠倒”（when child injects parent）。 Dynamic components 或 ContentChildren 看起来更自然。
很多人没有，我很久没有了。我将其归咎于糟糕的 Angular 文档。对于某些用例，它绝对是最优雅和最简单的方法。我经常在我有一个包含许多相同相关子组件（如选项卡、列表和其他内容）的单个父级的情况下使用它。除了直接的父->子关系之外，它可能会变得一团糟