从 Nebular 窗口组件打开 Nebular 对话框。

huangapple go评论62阅读模式
英文:

Opening Nebular dialog from Nebular window component

问题

My structure is like this:

|_ app.module.ts
|_ app.component.ts
|_ admin
|   |_ admin.module.ts
|   |_ admin.component.ts
|   |_ admin.component.html
|   |_ org-tree
|      |_ org-tree.component.ts
|      |_ org-tree.component.html
|      |_ org-edit
|        |_ org-edit.component.ts
|        |_ org-edit.component.html
|        |_ org-delete-dialog
|          |_ org-delete-dialog.component.ts
|          |_ org-delete-dialog.component.html

org-tree显示组织的分层列表。单击其中任何一个会通过以下方式打开编辑对话框:

this.windowService.open(OrgEditComponent, { title: `Edit`, context: { organisation: org } });

此窗口包含一个带有保存和删除按钮的表单。删除按钮与以下内容相关联:

this.dialogService.open(OrgDeleteDialogComponent, {
  context: {
    organisation: this.organisation
  },
  closeOnBackdropClick: false,
});

单击此按钮会出现以下错误:

ERROR Error: No component factory found for OrgDeleteDialogComponent. Did you add it to @NgModule.entryComponents?    OrgEditComponent.html:138
    at noComponentFactoryError (core.js:19453)
    at CodegenComponentFactoryResolver.resolveComponentFactory (core.js:19504)
    at NbPortalOutletDirective.attachComponentPortal (portal.js:506)
    at NbDialogContainerComponent.attachComponentPortal (index.js:17947)
    at NbDialogService.createContent (index.js:18156)
    at NbDialogService.open (index.js:18114)
    at OrganisationEditComponent.confirmDeleteOrg (organisations-edit.component.ts:43)
    at Object.eval [as handleEvent] (OrganisationEditComponent.html:141)
    at handleEvent (core.js:34777)
    at callWithDebugContext (core.js:36395)

AdminModule是:

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    NbCardModule,
    ThemeModule,
	NbTreeGridModule,
    NbButtonModule,
    NbInputModule,
    NbIconModule,
    NbWindowModule.forChild(),
    NbDialogModule.forChild(),
  ],
  declarations: [
    AdminComponent,
    OrgTreeComponent,
    OrgDeleteDialogComponent,
    OrgEditComponent,
    FsIconComponent,
  ],
  entryComponents: [
    OrgDeleteDialogComponent,
    OrgEditComponent,
  ]
})
export class AdminModule { }

如果我在org-tree-component中放置一个按钮以打开org-delete-dialog,它可以正常工作,所以我猜测问题与Window组件打开Dialog组件有关。

我需要添加什么来使其正常工作?

谢谢。

英文:

My structure is like this:

|_ app.module.ts
|_ app.component.ts
|_ admin
|   |_ admin.module.ts
|   |_ admin.component.ts
|   |_ admin.component.html
|   |_ org-tree
|      |_ org-tree.component.ts
|      |_ org-tree.component.html
|      |_ org-edit
|        |_ org-edit.component.ts
|        |_ org-edit.component.html
|        |_ org-delete-dialog
|          |_ org-delete-dialog.component.ts
|          |_ org-delete-dialog.component.html

org-tree displays a hierarchical list of organisations. Clicking on any of these opens the edit dialog via

this.windowService.open(OrgEditComponent, { title: `Edit`, context: { organisation: org } });

This window contains a form with a save and a delete button. The delete button is attached to the following:

this.dialogService.open(OrgDeleteDialogComponent, {
  context: {
    organisation: this.organisation
  },
  closeOnBackdropClick: false,
});

Clicking this button gives the following error:

ERROR Error: No component factory found for OrgDeleteDialogComponent. Did you add it to @NgModule.entryComponents?    OrgEditComponent.html:138
    at noComponentFactoryError (core.js:19453)
    at CodegenComponentFactoryResolver.resolveComponentFactory (core.js:19504)
    at NbPortalOutletDirective.attachComponentPortal (portal.js:506)
    at NbDialogContainerComponent.attachComponentPortal (index.js:17947)
    at NbDialogService.createContent (index.js:18156)
    at NbDialogService.open (index.js:18114)
    at OrganisationEditComponent.confirmDeleteOrg (organisations-edit.component.ts:43)
    at Object.eval [as handleEvent] (OrganisationEditComponent.html:141)
    at handleEvent (core.js:34777)
    at callWithDebugContext (core.js:36395)

AdminModule is:

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    NbCardModule,
    ThemeModule,
	NbTreeGridModule,
    NbButtonModule,
    NbInputModule,
    NbIconModule,
    NbWindowModule.forChild(),
    NbDialogModule.forChild(),
  ],
  declarations: [
    AdminComponent,
    OrgTreeComponent,
    OrgDeleteDialogComponent,
    OrgEditComponent,
    FsIconComponent,
  ],
  entryComponents: [
    OrgDeleteDialogComponent,
    OrgEditComponent,
  ]
})
export class AdminModule { }

If I put a button to open the org-delete-dialog on the org-tree-component, it opens fine, so I guess it's something to do with the Window component opening the Dialog component.

What do I need to add to make this work?

Thanks.

答案1

得分: 0

我更改了代码,使得在任何位置点击按钮都会触发一个事件,然后该事件在org-tree-component中处理,以打开实际的对话框。

英文:

I changed the code so that clicking the button in either location simply dispatched an event, and that event was handled in the org-tree-component to open the actual dialog.

huangapple
  • 本文由 发表于 2020年1月6日 23:10:10
  • 转载请务必保留本文链接:https://go.coder-hub.com/59614485.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定