javascript - 如何将垫对话框注入(inject)服务？

Question

您好，我有一个 Angular Material 对话框服务，如下所示:

export class DialogModelService {
  participant: ParticipantInfoDTO;

  constructor(private dialog: MatDialog, route: ActivatedRoute) {
    this.participant = route.snapshot.data['participant'];
  }

  openEcheqSelectorDialog(): Observable<any> {
  const dialogRef =     this.dialog.open(EcheqSelectorComponent, {
      width: '600px',
      maxHeight: 'calc(100vh - 2em)',
      data: {
        participant: console.log('participantIDTest', this.participant)
      }
    });

    return dialogRef.afterClosed();
  }
}

现在我尝试将其注入(inject)这样的组件:

export class DetailComponent implements OnInit  {


  @Input() participant: ParticipantInfoDTO;

  constructor(private dialog: MatDialog, route: ActivatedRoute, private dialogModelService:  DialogModelService) {
    this.participant = route.snapshot.data['participant'];
  }

  ngOnInit() {

  }

  openEcheqSelectorDialog(){
    this.dialogModelService.openEcheqSelectorDialog().subscribe(data => console.log(data));
  }
}

这是模板:

  <button mat-raised-button class="button-spacing" (click)="openEcheqSelectorDialog()" i18n>Send echeq</button>

我在这个模块中声明了组件:

 @NgModule({
      declarations: [ListComponent, DetailComponent, ExtendedSearchComponent, LoaderComponent, ChangeEmailComponent],
      exports: [LoaderComponent, DetailComponent],


export class ParticipantModule {}

但是我得到这个错误:

DetailComponent.html:9 ERROR Error: No component factory found for EcheqSelectorComponent. Did you add it to @NgModule.entryComponents?
    at noComponentFactoryError (core.js:7754)
    at CodegenComponentFactoryResolver.push../node_modules/@angular/core/fesm5/core.js.CodegenComponentFactoryResolver.resolveComponentFactory (core.js:7792)
    at CdkPortalOutlet.push../node_modules/@angular/cdk/esm5/portal.es5.js.CdkPortalOutlet.attachComponentPortal (portal.es5.js:654)
    at 

所以我的问题是:我必须改变什么？

谢谢

我有。我已将它们都放在模块中:

@NgModule({
  declarations: [
    EcheqQuestionComponent,
    EcheqDisplayComponent,
    EcheqViewListComponent,
    EcheqViewItemComponent,
    EcheqSelectorComponent,
    MetaBoxComponent,
    ConfirmDialogComponent,
    StrenumQuestionComponent,
    StrlistQuestionComponent,
    RadioQuestionComponent
  ],
  exports:[
    EcheqSelectorComponent
  ],

  imports: [
    // Angular
    CommonModule,
    FormsModule,

    // Angular Material
    MatDialogModule,
    MatButtonModule,
    MatIconModule,
    MatInputModule,
    MatSortModule,
    MatPaginatorModule,
    MatTableModule,
    MatExpansionModule,
    MatCardModule,
    MatDividerModule,
    MatCheckboxModule,
    MatRadioModule,
    MatSelectModule,

    // Carapax
    AuthModule,
    ParticipantEcheqRoutingModule,
    SharedModule
  ],
  entryComponents: [
    EcheqSelectorComponent,
    ConfirmDialogComponent
  ]
})
export class ParticipantEcheqModule { }

Answer 1

我认为问题与提供 DialogModelService 的地方有关。

要检查这是否是问题所在，请尝试在 ParticipantEcheqModule 中提供 DialogModelService:

@NgModule({
  declarations: [
    EcheqQuestionComponent,
    EcheqDisplayComponent,
    EcheqViewListComponent,
    EcheqViewItemComponent,
    EcheqSelectorComponent,
    MetaBoxComponent,
    ConfirmDialogComponent,
    StrenumQuestionComponent,
    StrlistQuestionComponent,
    RadioQuestionComponent
  ],
  exports:[
    EcheqSelectorComponent
  ],
  providers: [
    DialogModelService
  ],
  imports: [
    // Angular
    CommonModule,
    FormsModule,

    // Angular Material
    MatDialogModule,
    MatButtonModule,
    MatIconModule,
    MatInputModule,
    MatSortModule,
    MatPaginatorModule,
    MatTableModule,
    MatExpansionModule,
    MatCardModule,
    MatDividerModule,
    MatCheckboxModule,
    MatRadioModule,
    MatSelectModule,

    // Carapax
    AuthModule,
    ParticipantEcheqRoutingModule,
    SharedModule
  ],
  entryComponents: [
    EcheqSelectorComponent,
    ConfirmDialogComponent
  ]
})
export class ParticipantEcheqModule { }