如何解决Angular 10 primeng NullInjectorError：没有ConfirmationService的提供者？

Question

我正在使用 primeng verifyDialog，它需要在我的 Angular 10 项目中使用confirmationService，但 localhost:4200 上没有显示任何内容，并且我在 Chrome 控制台中收到以下错误。

ERROR NullInjectorError: R3InjectorError(AppModule)[ConfirmationService -> ConfirmationService -> ConfirmationService]: 
NullInjectorError: No provider for ConfirmationService!
  at NullInjector.get (http://localhost:4200/vendor.js:27059:27)
  at R3Injector.get (http://localhost:4200/vendor.js:37225:33)
  at R3Injector.get (http://localhost:4200/vendor.js:37225:33)
  at R3Injector.get (http://localhost:4200/vendor.js:37225:33)
  at NgModuleRef$1.get (http://localhost:4200/vendor.js:50342:33)
  at Object.get (http://localhost:4200/vendor.js:48245:35)
  at getOrCreateInjectable (http://localhost:4200/vendor.js:30065:39)
  at Module.ɵɵdirectiveInject (http://localhost:4200/vendor.js:39896:12)
  at NodeInjectorFactory.AppComponent_Factory [as factory] (http://localhost:4200/main.js:158:150)
  at getNodeInjectable (http://localhost:4200/vendor.js:30173:44)

这是我的app.component.ts。

import { Component } from '@angular/core';
import { ConfirmationService } from 'primeng/api';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']

})
export class AppComponent {
  title = 'angular-tuts';

  constructor(private confirmationService: ConfirmationService) { }

  confirm() {
    this.confirmationService.confirm({
      message: 'Are you sure that you want to perform this action?',
      accept: () => {

      }
    });
  }

}

这是app.component.html

<p-confirmDialog header="Confirmation" icon="pi pi-exclamation-triangle"></p-confirmDialog>

<button type="text" (click)="confirm()" pButton icon="pi pi-check" label="Confirm"></button>

谢谢

Answer 1

通过导入ConfirmationService然后将其添加到app.module.ts中的提供者列表中解决了这个问题，正如@akash评论所说：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule, routingComponents } from './app-routing.module';
import { AppComponent } from './app.component';
import { from } from 'rxjs';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material/material.module';
import { CoreModule } from '../app/core/core.module';
import { ConfirmDialogModule } from 'primeng/confirmdialog';
import { ConfirmationService } from 'primeng/api';

@NgModule({
  declarations: [
    AppComponent,
    routingComponents,
    TabletestComponent,
    TableComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    BrowserAnimationsModule,
    MaterialModule,
    CoreModule,
    MatTableModule,
    MatPaginatorModule,
    MatSortModule,
    TableModule,
    HttpClientModule,
    ConfirmDialogModule

  ],
  providers: [ConfirmationService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 2

另一种解决方案是您可以在组件中添加提供程序，如下所示：

import { Component } from '@angular/core';
import { ConfirmationService } from 'primeng/api';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers:[ConfirmationService]
})
export class AppComponent {
  title = 'angular-tuts';

  constructor(private confirmationService: ConfirmationService) { }

  confirm() {
    this.confirmationService.confirm({
      message: 'Are you sure that you want to perform this action?',
      accept: () => {

      }
    });
  }

}