Angular - Ionic - 无法创建弹出框，组件注入错误

Question

我正在尝试使用 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模块，仍然是同样的错误。

如果有人有想法。

Answer 1

所以， 我找到了一个解决方案，只需将 IonicPage 装饰器添加到 popover 组件。 创建一个声明组件的模块并删除声明和入口组件。 不要将模块加载到另一个模块中，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');