代码之家  ›  专栏  ›  技术社区  ›  Julien METRAL

Angular-Ionic-无法创建popover,组件注入错误

  •  1
  • Julien METRAL  · 技术社区  · 6 年前

    我试图用Ionic Framework v3显示一个Popover,我有一个包含列表组件的Ionic页面,在这个列表中,我有一个按钮可以显示一个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中,在应用程序模块中,仍然存在相同的错误。

    如果有人有主意。

    1 回复  |  直到 6 年前
        1
  •  2
  •   Julien METRAL    6 年前

    所以 我找到了一个解决方案,只需将IonicPage decorator添加到popover组件中。 创建一个声明组件的模块,并删除声明和entrycomponents。 不要在另一个模块中加载该模块,爱奥尼亚会完成的。 所以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');