全局组件 Ionic 3

Question

我正在使用 Angular 4 在 ionic 3 上开发 PWA，但我多次尝试制作一个不错的 UI 展示的失败有关事件的应用内通知。

我有一个 NotificationsService 负责所有与从 Firebase 获取通知有关的事情。

我最初的方法是定义一个 UI 组件 (a.k.a notification-box) 它将 观察属性 在 Notification Service 中使用该服务提供的通知并将它们很好地显示在屏幕顶部。

这听起来不错，但我创建了这个组件并遇到了 3 个问题：

Ionic 3 不允许（AFAIK）组件 'global' 并且出现在所有应用程序页面中。

在每个页面的顶部包含我的组件的标签这不是一个好主意，因为组件多次被实例化和销毁，这使得订阅 Observable 通知变得困难属性在服务中，并且 这可能导致通知不会在页面切换之间到达.

如果打开模态通知到达哪里，通知将显示在模态后面，我的意图是显示通知始终在顶部。

我最终使用了 ionic-angular 中的 ToastController，无论如何它总是显示在顶部（尽管它是有点难看，我想切换到 angular2-notifications).

Ionic 是如何实现这种 "always on top" 行为的？有什么办法可以用我自己的 class 复制它或扩展 ToastCtrl？

Answer 1

您可以通过提供程序实现您想要的，是的，您仍然需要将此类提供程序注入到您希望在其中查看通知的每个页面中。您不需要修改这些页面的视图（html 模板）。

我有类似的需求（无论页面如何，都在应用程序内部呈现 "toast"）。

我通过将此提供程序设为单例提供程序（意味着我们在提供程序部分的 app.module.ts 中声明它）来解决此问题，并将其注入每个页面（导入并添加到构造函数）：

import { Injectable } from '@angular/core';
import { ToastController } from 'ionic-angular'

@Injectable()
export class Toaster {

    constructor (private toastCtrl: ToastController) {
    }

    presentToast(message, position, cssclass) {
        let toast = this.toastCtrl.create({
            message: message,
            closeButtonText: "OK",
            showCloseButton: true,
            cssClass: cssclass,
            position: position
        });
        toast.present();
    }
    presentSimpleToast(message, position) {
        let toast = this.toastCtrl.create({
            message: message,
            duration: 3000,
            position: position
        });
        toast.present();
    }
}

全局组件 Ionic 3

Global component Ionic 3

toast

push-notification

ionic-framework

progressive-web-apps

angular-components