1

我有一个共享模块，其中包含常见组件，例如标题和通知组件。我有另一个名为 ProductModule 的模块，它使用共享模块中的通知组件并调用通知组件中定义的函数。

shared.module.ts

@NgModule({
    declarations: [
        HeaderComponent,
        SideNavComponent,
        SpinnerComponent,
        ItemSummaryComponent,
        UserRoleDirective,
        EmptyResultComponent,
        NotificationComponent
    ],
    imports: [
        CommonModule,
        RouterModule,
        MatProgressSpinnerModule,
        MatIconModule
    ],
    exports: [
        HeaderComponent,
        SideNavComponent,
        SpinnerComponent,
        ItemSummaryComponent,
        EmptyResultComponent,
        NotificationComponent
    ],
})
export class SharedModule {}

通知组件.ts

export class NotificationComponent {
  openSnackBar(message: string, state: string, icon: string): void {
    const config = new MatSnackBarConfig();
    config.duration = 3000;
    config.panelClass = ['nc-notification', state];
    config.data = { message, icon };
    this._snackBar.openFromComponent(NotificationComponent, config);
  }
}

在我的延迟加载productModuel中，我已经导入了我sharedModule的如下。

import { CommonCmpsModule } from '../common-cmps/common-cmps.module';
import { TaxConfigurationComponent } from './tax-configuration/tax-configuration.component';

    @NgModule({
      declarations: [
        TaxConfigurationComponent
      ],
      imports: [
        SharedModule,
      ]
    })
    export class ProductModule { }

在我的TaxConfigurationComponent中，我想使用通知组件并调用 openSnackBar 函数。

TaxConfiguration.component.ts

import { NotificationComponent } from 'src/app/common-cmps/notification/notification.component';

export class TaxConfigurationComponent {
    constructor(
        private notificationService: NotificationService
    ){}

    onClickSave(): void {
        this.notificationService.openSnackBar('An Error Occurred', 'nc-notification--error', 'close');
    }
}

但是，我在浏览器控制台中遇到了错误。

错误错误：未捕获（承诺）：NullInjectorError：R3InjectorError（ProductManagementModule）[NotificationComponent -> NotificationComponent -> NotificationComponent -> NotificationComponent]：NullInjectorError：NotificationComponent 没有提供者！

4

3 回答 3

1

构造函数用于注入服务而不是组件。

对于组件，您有两个选项。

  1. 如果使用了选择器，则可以使用@ViewChild 获取通知组件实例并调用该方法。

  2. 如果未使用选择器，请创建一个带有主题的服务，并从 taxconfiguration 组件中对该主题调用 .next。在通知组件中订阅该主题并在订阅中调用您的 opensnackbar 方法。

于 2020-09-09T07:31:08.747 回答
0

问题可能是您正在导入NotificationComponent但在构造函数中您正在引用NotificationService并尝试调用在NotificationComponent中定义的函数？

于 2020-09-11T11:23:57.883 回答
0

不要对组件使用构造函数注入。在您正在使用的税务配置组件中

 constructor(
        private notificationCmp: NotificationComponent
    ){}

请删除它。并注入MatSnackBar由以下材料提供的服务

import {MatSnackBar} from '@angular/material/snack-bar';
constructor(private _snackBar: MatSnackBar) {}

这并使用您的自定义组件，如下所示

  this._snackBar.openFromComponent(NotificationComponent, {
      duration: 1500,
    });

除此之外，您需要在模型中添加 NotificationComponent 作为入口组件

  entryComponents: [NotificationComponent],
于 2020-09-09T07:50:33.253 回答