Как передать угловой компонент в службу диалога Nebular

Я пытаюсь создать веб-диалог на Agnular6, используя Nebular компоненты. Это можно сделать двумя способами. Первый - передать <ng-template> ссылку, например:

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

и он работает хорошо. Но мне нужно передать компонент в качестве параметра, например:

dialogService.open(MyComponent);

У меня в приложении есть такая структура:

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

Я добавил ModalFormComponent к declarations, exports и entryComponents в общем модуле. Кроме того, я импортировал его в компонент SearchBar и запускал эту функцию при нажатии кнопки в searchBar:

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

и я получил эту ошибку в консоли браузера:

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)

Есть мысли о том, в чем проблема и как ее исправить?


typescript dialog ngx-admin nebular angular6
person Muhammad Al-Shareef    schedule 06.11.2019    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Попробуйте поместить компонент в поле entryComponents в модуле (будь то основной модуль или дочерний модуль, в зависимости от вашей ситуации).

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

Это должно решить вашу ошибку.

person Spartak Lalaj    schedule 29.11.2019
comment
Спасибо за Ваш ответ! Вы совершенно правы, это устранило ошибку! - person Muhammad Al-Shareef; 25.12.2019

arrow_upward
5
arrow_downward

Используйте параметр context, чтобы передать все необходимые параметры.

Например, представьте, что у вас есть 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);
  }
}

Чтобы передать заголовок и myObject, используйте параметр контекста:

const sampleObject = new MyObject();
this.dialogService.open(SimpleInputDialogComponent, {
      context: {
        title: 'Enter template name',
        myObject: sampleObject,
      },
    })
person mabg    schedule 21.11.2019
comment
Спасибо за ответ @mabg. Но проблема не в том, как отправлять входные данные компонентов. Проблема в том, что метод отправки компонента вообще не работает! - person Muhammad Al-Shareef; 23.11.2019

arrow_upward
1
arrow_downward

Вот что предлагают nebular документы:

open() {
 this.dialogService.open(yourComponent, {
   context: {
     title: 'This is a title passed to the dialog component',
   },
 });
}
person Qiimiia    schedule 13.09.2020