使用 Ionic2 创建自定义可重用警报（或模态）组件答案

【问题标题】：Creat custom reusable Alert (or Modal) component with Ionic2使用 Ionic2 创建自定义可重用警报（或模态）组件
【发布时间】：2017-01-17 23:08:31
【问题描述】：

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

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

问题是在警报之前出现一个白屏然后消失，因此警报并没有真正显示在正确的视图之上。

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

【问题讨论】：

标签： angular ionic-framework ionic2

【解决方案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)

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

希望这会有所帮助！

【讨论】：

有趣...从用户体验的角度来看，这似乎可以实现我想要的，但让我想知道是否有更好的方法来做到这一点。要求为自定义警报/模式提供服务似乎不是最佳设计选择。
你可能有一个你引用的通用服务文件，你可以将它包含在其中，这样你就可以最大限度地减少导入，但我还没有真正找到一种更简单的方法来使它具有通用性。如果你找到了，请把它贴在这里，让我看看！ :)
这里提出了另一种解决方案，理由是服务层不应与视图层交互forum.ionicframework.com/t/…

【解决方案2】：

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

share modals example image

1/ 创建 SharedModule 并声明和导出您要共享的 Modals

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 让我们将 ShareModule 导入到你想要重用的 PageModule

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

【讨论】：