Angular

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');

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

Angular - Ionic - Cannot create a popover, component injection error

typescript

ionic-framework

ionic3

popover