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中，我们可以使用共享模块：

share modals example image

1 /创建SharedModule并声明并导出要共享的模式

truncate table entreprises restart identity

2让我们将ShareModule导入到要重用的PageModule

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

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

2 个答案: