Ionic Framework v3を使用してポップオーバーを表示しようとしています。リストコンポーネントを含むイオンページがあります。このリストには、ポップオーバーを表示するボタンがあります。そのため、親ページでポップオーバーコンポーネントを宣言し、リストにイベントエミッターを作成して、親にトグル情報を送信します。
しかし、私は与えられたエラーを持っています：
No component factory found for PopoverComponent. Did you add it to @NgModule.entryComponents?
ページモジュールのコード：
@NgModule({
declarations: [
PopoverComponent
],
imports: [
IonicPageModule.forChild(MyCustomPage),
],
entryComponents: [
PopoverComponent
]
})
export class MyCustomModule {}
ページのコード：
@Component({
selector: 'my-custom-page',
templateUrl: 'my-custom-page.html'
})
export class MyCustomPage {
public constructor(public popoverCtrl: PopoverController) { }
public toggleFilters() {
const popover = this.popoverCtrl.create(PopoverComponent);
popover.present();
}
}
ページのテンプレート：
<my-custom-list (onFilterToggle)="toggleFilters()"></my-custom-list>
コンポーネントリスト：
@Component({
selector: 'my-custom-list',
templateUrl: 'my-custom-list.component.html'
})
export class MyCustomListComponent {
@Output() onFilterToggle: EventEmitter<void> = new EventEmitter<void>();
public showFilters() {
this.onFilterToggle.emit();
}
}
コンポーネントテンプレート：
<button (click)="showFilters()">Test</button>
ポップオーバーコード：
@Component({
selector: 'my-popover',
template: '<p>Test</p>'
})
export class PopoverComponent {
constructor(public viewCtrl: ViewController) {}
close() {
this.viewCtrl.dismiss();
}
}
すべてのページにロードされている共有モジュールがあります。ここに追加しようとしましたが、それでも同じエラーが発生しました。リストコンポーネント、アプリモジュール、さらにはentryComponentsに追加しようとしました。同じエラー。
誰かがアイデアを持っている場合。
そこで、解決策を見つけました。ポップオーバーコンポーネントにIonicPageデコレータを追加するだけです。コンポーネントを宣言するモジュールを作成し、宣言とエントリコンポーネントを削除します。モジュールを別のモジュールにロードしないでください。Ionicがロードします。したがって、ポップオーバーのコードは次のようになります。
@IonicPage({
name: 'my-popover'
})
@Component({
selector: 'my-popover',
template: '<p>Test</p>'
})
export class PopoverComponent {
constructor(public viewCtrl: ViewController) {}
close() {
this.viewCtrl.dismiss();
}
}
モジュールは次のようになります：
import {NgModule} from '@angular/core';
import {TranslateModule} from '@ngx-translate/core';
import {IonicPageModule} from 'ionic-angular';
import {PopoverComponent} from './components';
@NgModule({
declarations: [
PopoverComponent
],
imports: [
IonicPageModule.forChild(PopoverComponent)
],
exports: [
PopoverComponent
]
})
export class MyPopoverModule {}
ポップオーバーを呼び出すには、次のようなページの名前を使用します。
this.popoverCtrl.create('my-popover');
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加