Question

我正在尝试使用Ionic Framework v3显示一个Popover，我有一个包含列表组件的离子页面，在此列表中我有一个显示弹出窗口的按钮。所以我已经在父页面中声明了我的popover组件，并且我在列表中创建了一个事件发射器，它将向父节点发送切换信息。

但我得到了给定的错误：

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>

Popover代码：

@Component({
    selector: 'my-popover',
    template: '<p>Test</p>'
})
export class PopoverComponent {

    constructor(public viewCtrl: ViewController) {}

    close() {
        this.viewCtrl.dismiss();
    } 
}

我有一个共享模块加载到我的所有页面中，我试图在这里添加它但仍然是同样的错误，我试图将它添加到列表组件中的entryComponents，在应用程序中模块仍然是同样的错误。

如果有人有想法。

Answer 1

所以，我找到了一个解决方案，只需将IonicPage装饰器添加到popover组件即可。创建一个声明组件并删除声明和entrycomponents的模块。不要将模块加载到另一个模块中，Ionic将完成它。所以popover的代码是：

@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 {}

要调用popover，只需使用页面名称：

this.popoverCtrl.create('my-popover');

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

1 个答案: