Ionic 4 - 在每个页面上使用相同的弹出框组件

Question

我有一个 ion-toolbar 我想在应用程序的每个页面中保持一致，特别是我希望右侧的按钮加载具有页面不可知功能（注销等）的弹出窗口。

home.page.html:

 <ion-header translucent>
  <ion-toolbar color="primary">
    <ion-buttons slot="primary">
      <ion-button slot="end">
        <button mat-button (click)="presentPopover($event)"><mat-icon>more_vert</mat-icon></button>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

presentPopover代码如下：

async presentPopover(ev: any) {
    const popover = await this.popoverController.create({
      component: MainPopoverComponent,
      event: ev,
      translucent: true
    });
    return await popover.present();
  }

据我了解，让同一组件出现在多个页面上的最佳方法是将组件导出为更大模块的一部分 (component.module.ts)：

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { MainPopoverComponent } from './main-popover/main-popover.component';

@NgModule({
 imports:      [ CommonModule, IonicModule ],
 declarations: [ MainPopoverComponent,],
 exports:      [ MainPopoverComponent,
                 CommonModule, FormsModule ]
})
export class ComponentsModule { }

导入过程没有问题，页面加载正常，但是当我点击按钮时出现错误：

Error: No component factory found for ComponentsModule. Did you add it to @NgModule.entryComponents?

将其添加到 entryComponents 会引发错误：

ComponentsModule cannot be used as an entry component.

我不知道如何继续。

Answer 1

您可以在 app.module.ts

中添加 MainPopoverComponent

@NgModule({
  declarations: [MainPopoverComponent ],
  entryComponents: [MainPopoverComponent ],
  ...
  bootstrap: [AppComponent]
})

然后你可以像这样在任何pages/components

中使用它

import { MainPopoverComponent } from './path-of-component';

async presentPopover(ev: any) {
    const popover = await this.popoverController.create({
      component: MainPopoverComponent,
      event: ev,
      translucent: true
    });
    return await popover.present();
}

Ionic 4 - 在每个页面上使用相同的弹出框组件

Ionic 4 - Using the same popover component on every page

ionic-framework

ionic4