Nebular
コンポーネントを使用して、Agnular6でWebダイアログを作成しようとしています。これを行うには2つの方法があります。最初の方法は、次のように<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)
何が問題であり、どのように修正すればよいですか?
モジュールの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{
}
これでエラーが解決します。
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,
},
})