доступ к функциям компонентов в общих модулях

Question

У меня есть общий модуль, который содержит общие компоненты, такие как заголовки и компоненты уведомлений. У меня есть другой модуль под названием 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 {}

notification.component.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');
    }
}

Но я получаю ошибку ниже в консоли браузера.

ERROR Ошибка: Неперехваченный (в обещании): NullInjectorError: R3InjectorError(ProductManagementModule)[NotificationComponent -> NotificationComponent -> NotificationComponent -> NotificationComponent]: NullInjectorError: Нет поставщика для NotificationComponent!

Answer 1

Конструктор используется для внедрения сервисов, а не компонентов.

Для компонента у вас есть два варианта.

1. если используется селектор, вы можете использовать @ViewChild для получения экземпляра компонента уведомления и вызова метода.

2. если селектор не используется, создайте службу с темой и вызовите.next для этой темы из компонента taxconfiguration. подпишитесь на эту тему в компоненте уведомления и вызовите свой метод opensnackbar внутри подписки.

Answer 2

Может ли проблема быть в том, что вы импортируете NotificationComponent, но в конструкторе вы ссылаетесь на NotificationService и пытаетесь вызвать функцию, определенную в NotificationComponent?

Answer 3

Не используйте внедрение конструктора для компонента. В компоненте налоговой конфигурации вы используете

 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],