angular - använd komponent utan MatDialog, MatDialogRef<SomeComponent>

Jag har en funktion som öppnar en MatDialog med en komponent som heter 'NoteFormComponent', det ser ut så här

  openForm() {
    let dialogConfig = new MatDialogConfig();
    dialogConfig.autoFocus = true;
    dialogConfig.width = "95%";
    dialogConfig.panelClass = "form-dialog";
    dialogConfig.scrollStrategy = new NoopScrollStrategy();

    this.dialog.open(NoteFormComponent, dialogConfig).beforeClose().subscribe(() => this.getNotes());
  }

Jag visar upp en modal som innehåller 'NoteFormComponent'. Så VAD är problemet?

Problemet är att jag vill använda 'NoteFormComponent' utan en MatDialog, men för att använda den med MatDialog var jag tvungen att injicera en referens i komponentens konstruktor på detta sätt

  constructor(
    private noteService : NoteService, 
    private productService : ProductService,
    private categoryService : CategoryService,
    private clientService : ClientService,
    private notification : NotificationService,
    private dialogRef : MatDialogRef<NoteFormComponent>, /*This Reference*/
    private loader : LoaderService,
    private sessionService : SessionService,
    private securityBlockerService : SecurityBlockerService,
    private dialog : MatDialog,
    private dialogService : DialogService
  ) { }

Och om jag försöker använda komponenten med mallväljaren '' så kastar den ett fel att det inte finns någon leverantör för MatDialogRef, det enda som kommer till mitt sinne är att skapa en kopia av 'NoteFormComponent' men utan MatDialogRef-injektorn i konstruktören.

Finns det något sätt att lösa eller kringgå detta problem?

Svar #1

Använd @Optional()-dekorationen när du injicerar MatDialogRef i konstruktorn (Referens):

constructor(
    ...
    @Optional() private dialogRef: MatDialogRef<NoteFormComponent>,
    ...
) { ... }

Genom att göra detta kan du använda NoteFormComponent på det vanliga sättet, utan att använda MatDialog.

Relaterade artiklar