如何将角度分量传递给星云对话服务答案

【问题标题】：How to pass angular component to Nebular dialog service如何将角度分量传递给星云对话服务
【发布时间】：2019-11-06 19:44:02
【问题描述】：

我正在尝试使用 Nebular 组件在 Agnular6 上创建一个 Web 对话框。有两种方法可以做到，第一种是通过<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 angular6 nebular ngx-admin

【解决方案1】：

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

要传递 title 和 myObject，请使用 context 参数：

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

【讨论】：

感谢@mabg 的回答，但问题不在于如何发送组件输入。问题是发送组件方法根本不起作用！

【解决方案2】：

尝试将组件放在模块的 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{
}

这应该可以解决您的错误。

【讨论】：

感谢您的回答！你完全正确，这已经解决了错误！

【解决方案3】：

这是nebular 文件的建议：

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

【讨论】：

【解决方案4】：

解决方案：参数应该在ngOnInit上获取，而不是在构造函数中

【讨论】：