web-dev-qa-db-fra.com

Comment passer angular au service de dialogue Nebular

J'essaie de créer une boîte de dialogue Web sur Agnular6 en utilisant les composants Nebular. Il existe deux façons de procéder, la première consiste à passer <ng-template> référence, comme:

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

et ça marche bien. Mais ce dont j'ai besoin, c'est de passer un composant en paramètre comme:

dialogService.open(MyComponent);

J'ai cette structure dans mon application:

|_ 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

J'ai ajouté le ModalFormComponent au declarations, exports et entryComponents dans le module partagé. Aussi, je l'ai importé dans le composant SearchBar et exécutez cette fonction en cliquant sur un bouton dans searchBar:

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

et j'ai eu cette erreur dans la console du navigateur:

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)

Avez-vous des réflexions sur le problème et comment puis-je le résoudre?

typescriptdialogangular6nebularngx-admin
3
Muhammad Al-Shareef

Essayez de placer le composant dans le champ entryComponents du module (que ce soit le module principal ou un module enfant, selon votre situation).

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

Cela devrait résoudre votre erreur.

1
Spartak Lalaj

Utilisez le paramètre context pour transmettre tous les paramètres nécessaires.

Par exemple, imaginez que ce composant SimpleInputDialogComponent:

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

Pour passer title et myObject, utilisez le paramètre context:

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