如何将垫对话框注入服务?

时间:2019-12-04 15:24:02

标签: javascript angular angular-material modal-dialog

嗨,我为Angular材质对话框提供了服务,如下所示:

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();
  }
}

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


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 { }

2 个答案:

答案 0 :(得分: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 { }

答案 1 :(得分:0)

尝试在模块的 entryComponents 声明

中添加 EcheqSelectorComponent