在Angular中的另一个组件上调用函数时出现问题答案

【问题标题】：Problem calling function on another component in Angular在Angular中的另一个组件上调用函数时出现问题
【发布时间】：2020-03-18 00:20:15
【问题描述】：

在我解释我的问题之前，我的设置是背景。

核心是 AG Grid 和 ag-grid-angular 组件。我在其上构建了一个 ag-grid-base 组件它处理过滤器分页等基本功能。然后我有一个名为 filter-grid 的组件，它将一些动态设置内容添加到网格中，例如加载列列表等。然后我使用这个组件来设置我的不同网格的实例来显示数据。网格的一个功能是以模式形式查看和/或编辑数据。我实现了一个事件发射器，让调用对话框的组件知道何时因为更改而需要重新加载数据。

数据重新加载功能是我的 ag-grid-component 的一部分，我可以从我的 filter-grid 组件中很好地调用它，但是当我尝试从我的自定义网格中调用 filter-grid 上的一个函数时，我得到了一堆像

这样的错误

BucketGridComponent_Host.ngfactory.js? [sm]：1 错误错误： StaticInjectorError(AppModule)[BucketGridComponent -> FilterGridComponent]：StaticInjectorError（平台：核心)[BucketGridComponent -> FilterGridComponent]: NullInjectorError: 没有 FilterGridComponent 的提供者！

不确定我错过了什么..

【问题讨论】：

标签： angular

【解决方案1】：

我认为这是重复的

NullInjectorError: No provider for AngularFirestore + Can't resolve all parameters for AngularFirestore: ([object Object], ?)

也许您的 BucketGridModule 已经添加到 app.module.ts 导入。
所以你需要在BucketGridModule.component.ts 中添加导入和导出（两者）FilterGridModule 但是您的FilterGridComponent 没有模块，您需要将该组件添加（declarations）到BucketGridModule。如下。

BucketGridModule.component.ts

import { FilterGridComponent} from './{I don't know where it is}/FilterGridComponent';

@NgModule({
    imports: [
        ...
        FilterGridComponent
    ],
    export:  [
       ...
       FilterGridComponent
    ],
    declarations: [
        FilterGridComponent
    ],
})

app.component.ts

import { BucketGridModule} from './{I don't know where it is}/BucketGridModule';

@NgModule({
    imports: [
        ...
        BucketGridModule
    ],    
    declarations: [
        FilterGridComponent  //Now I'm not sure need or not.
    ],
})

【讨论】：

【解决方案2】：

经过一番尝试，解决方案比我想的要简单。相反，在构造函数中声明 filtergrid 我只导入了它

import { FilterGridComponent} from './{I don't know where it is}/FilterGridComponent';

然后创建一个@ViewChild。

@ViewChild('filterGrid') filterGrid: FilterGridComponent;

之后我可以毫无问题地调用 relaod 函数。

reloadData() {
    this.filterGrid.reload()
}

【讨论】：