typescript - Bagaimana cara mengirim komponen Angular ke layanan dialog Nebular

Saya sedang mencoba membuat dialog web di Agnular6 menggunakan komponen Nebular. Ada dua cara untuk melakukan ini, yang pertama adalah dengan melewatkan referensi <ng-template>, seperti:

  openAddDialog = (dialogTemplate: TemplateRef<any>) => {
    this.dialogServiceRef = this.dialogService.open(dialogTemplate);
  }

dan ini berjalan dengan baik. Tapi yang saya butuhkan adalah mengirimkan sebuah komponen sebagai parameter seperti:

dialogService.open(MyComponent);

Saya memiliki struktur ini di aplikasi saya:

|_ pages
|   |_ pages.module.ts
|   |_ patient
|      |_ patient.module.ts
|      |_ patient.component.ts
|      |_ patient.component.html
|
|_ shared
    |_ shared.module.ts
    |_ components
    |   |_ search-bar.component.ts
    |   |_ search-bar.component.html
    |
    |_ modal-form
        |_ modal-form.component.ts
        |_ modal-from.component.html

Saya telah menambahkan ModalFormComponent ke dalam declarations, exports, dan entryComponents di modul bersama. Juga, saya mengimpornya di komponen SearchBar dan menjalankan fungsi ini saat mengklik tombol di searchBar:

openAddDialog = () => {
    this.dialogServiceRef = this.dialogService.open(ModalFormComponent);
  }

dan saya mendapatkan kesalahan ini di konsol browser:

ERROR Error: No component factory found for ModalFormComponent. Did you add it to @NgModule.entryComponents?
    at noComponentFactoryError (core.js:19453)
    at CodegenComponentFactoryResolver.resolveComponentFactory (core.js:19504)
    at NbPortalOutletDirective.attachComponentPortal (portal.js:506)
    at NbDialogContainerComponent.attachComponentPortal (index.js:17128)
    at NbDialogService.createContent (index.js:17336)
    at NbDialogService.open (index.js:17295)
    at SearchBarComponent.openAddDialog (search-bar.component.ts:46)
    at Object.eval [as handleEvent] (SearchBarComponent.html:11)
    at handleEvent (core.js:34777)
    at callWithDebugContext (core.js:36395)

Adakah pemikiran tentang apa masalahnya dan bagaimana saya bisa memperbaikinya?

Jawaban #1

Gunakan parameter context untuk mengirim semua parameter yang dibutuhkan.

Sebagai contoh, bayangkan bahwa Anda memiliki SimpleInputDialogComponent ini:

import { Component, Input } from '@angular/core';
import { NbDialogRef } from '@nebular/theme';

@Component({
  selector: 'ngx-simple-input-dialog',
  templateUrl: 'simple-input-dialog.component.html',
  styleUrls: ['simple-input-dialog.component.scss'],
})
export class SimpleInputDialogComponent {

  title: String;
  myObject: MyObject;

  constructor(protected ref: NbDialogRef<SimpleInputDialogComponent>) {
  }

  cancel() {
    this.ref.close();
  }

  submit(value: String) {
    this.ref.close(value);
  }
}

Untuk mengirimkan title dan myObject, gunakan parameter context:

const sampleObject = new MyObject();
this.dialogService.open(SimpleInputDialogComponent, {
      context: {
        title: 'Enter template name',
        myObject: sampleObject,
      },
    })

Jawaban #2

Cobalah untuk menempatkan komponen di bidang entryComponents dalam modul (baik itu modul utama atau modul anak, tergantung pada situasi Anda).

import {NgModule} from '@angular/core';

import {
  //...
  NbDialogModule
  //...
} from '@nebular/theme';


@NgModule({
 declarations: [
 //...,
 ModalFormComponent,
 //...
 ],
 entryComponents: [
  //...
  ModalFormComponent,
  //...
 ],
 imports: [
 //...
 // NbDialogModule.forChild() or NbDialogModule.forRoot()
 //...
],
 providers: [
  //...
 ],
})
 export class ExampleModule{
}

Ini seharusnya menyelesaikan kesalahan Anda.

Artikel terkait