使用 Ionic2 创建自定义可重用警报(或模态)组件

Question

我有一个警报，其中附加了一些启动和其他逻辑，我想在我的应用程序内的多个位置重用这些逻辑。

我目前不喜欢的解决方案是我有一个组件，它在构造上创建和显示警报。所以当我希望警报显示时，我必须将我的新组件推送到堆栈上，然后导致警报显示。 在警报取消或操作时，我将新组件从堆栈中弹出，然后返回到上一个视图。

问题是在警报

之前出现白屏，然后消失，因此警报并没有真正显示在正确视图的顶部。

有没有更好的方法可以做到这一点？

Answer 1

您应该做的是创建一个服务，然后将该服务导入到要在其中使用警报的任何组件中。我最近用一个Ionic2应用程序做了这个。这样的东西应该可以很好地工作。

import { Injectable, Inject } from '@angular/core';
import { AlertController } from 'ionic-angular';
@Injectable()
export class AlertLoader {
  constructor(public alertCtrl: AlertController){}
  complexAlert(title, subTitle, buttonObj){
    let Alert = this.alertCtrl.create({
    title: title,
    subTitle: subTitle,
    buttons: buttonObj
    })
    console.log(Alert);
    Alert.present();
  }
}

然后在组件中使用它，导入它并像这样调用它。不过，不要忘记将其添加到您的构造函数中！

this.alertLoader.complexAlert('Title', 'subtitle', buttonObj)

如果该信息是常量，则可以对该信息进行硬编码，或者将其包含在另一个文件中，如果您希望在其他地方使用警报，则可以将其导入。

希望这有帮助！

Answer 2

Ionic 5 中的强文本，我们可以使用共享模块：

共享模态示例图像

1/创建共享模块并声明和导出要共享的模态

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { PrItemPage } from 'src/app/purchase/purchase-request/modals/pr-item/pr-item.page';
import { PrItemSelectPage } from 'src/app/purchase/purchase-request/modals/pr-item-select/pr-item-select.page';
import { PrSelectPage } from 'src/app/purchase/purchase-request/modals/pr-select/pr-select.page';

@NgModule({
  declarations: [
    PrItemPage,
    PrItemSelectPage,
    PrSelectPage,
  ],
  imports: [
    CommonModule,
    IonicModule,
  ],
  exports: [
    PrItemPage,
    PrItemSelectPage,
    PrSelectPage,
  ]
})
export class SharedPRModalModule { }

2 让将共享模块导入到要重用的页面模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { PurchaseorderMaintainPage } from './purchaseorder-maintain.page';
import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';
import { PurchaseRequestMaintainPageModule } from '../../purchase-request/purchase-request-maintain/purchase-request-maintain.module';
import { SharedPRModalModule } from 'src/app/_modals/shared-pr-modal/shared-pr-modal.module';
import { PrSelectPage } from '../../purchase-request/modals/pr-select/pr-select.page';
import { PrItemSelectPage } from '../../purchase-request/modals/pr-item-select/pr-item-select.page';
import { PrItemPage } from '../../purchase-request/modals/pr-item/pr-item.page';
const routes: Routes = [
  {
    path: '',
    component: PurchaseorderMaintainPage
  }
];
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
    RouterModule.forChild(routes),
    SharedPRModalModule
  ],
  providers: [
    BarcodeScanner
  ],
  declarations: [PurchaseorderMaintainPage],
  entryComponents: [PrSelectPage, PrItemSelectPage, PrItemPage],
})
export class PurchaseorderMaintainPageModule {}