如何在 Ionic 3 中发送本地通知？

Posted 2023-03-15

【中文标题】如何在 Ionic 3 中发送本地通知？

【英文标题】：How do I send local notifcation in Ionic 3?

【发布时间】：2017-05-15 19:13:00

【问题描述】：

我正在创建一个 Ionic 3 应用程序，我需要安排本地通知。我只是想设置一个测试通知，但我似乎无法让它工作。我在模拟器中尝试过，但没有任何反应。 LocalNotifications 插件也已添加到我的 app.module.ts 文件中。

这是我的打字稿文件导入和功能：

 import  Component  from '@angular/core';
 import  NavController, NavParams, Platform, AlertController  from 'ionic-angular';
 import  LocalNotifications  from '@ionic-native/local-notifications';
 import * as moment from 'moment';

@Component(
   selector: 'page-notification',
   templateUrl: 'notification.html',
)
export class NotificationPage 

 // Define the variables used in the view
 notifyTime: any;
 notifications: any[] = [];


 // The constructor initializes the imports
 constructor(
          public navCtrl: NavController, 
          public navParams: NavParams,
          public platform: Platform,
          public alertController: AlertController,
          public localNotifications: LocalNotifications
          ) 

testNotification() 

        // The notification
        let notification = 
            id:1,
            title: "test",
            text: "I am tester ?",
            every: "minute"
        ;

        this.notifications.push(notification);

        if(this.platform.is('cordova'))

                // Cancel any existing notifications
                this.localNotifications.cancelAll().then(() => 

                    // Schedule the new notifications
                    this.localNotifications.schedule(this.notifications);

                    this.notifications = [];

                    let alert = this.alertController.create(
                        title: 'Notifications set',
                        buttons: ['Ok']
                    );

                    alert.present();

                );

            



        console.log("Notifications to be scheduled: ", this.notifications);

我可以看到以下对象已传递到控制台：

every:"minute"
id:1
text:"I am tester ?"
title:"test"

单击按钮时仍然无法显示任何内容。你知道该怎么做吗？

【参考方案1】：

这就是我们创建简单本地通知的方式。

安装插件。

$ ionic plugin add --save de.appplant.cordova.plugin.local-notification
$ npm install --save @ionic-native/local-notifications

如果是第 3 版 CLI，请使用

ionic cordova plugin add de.appplant.cordova.plugin.local-notification

添加到 module.ts 文件

import  LocalNotifications  from '@ionic-native/local-notifications';

加入供应商列表

providers: [
 SplashScreen,
 LocalNotifications,
 provide: ErrorHandler, useClass: IonicErrorHandler
]

导入到我们想要使用的页面并像这样使用它..（出于演示目的，我在 viewdidload 方法上调用它）

export class HomePage 
    constructor(public navCtrl: NavController,private localNotifications: 
       LocalNotifications) 
    ionViewDidLoad() 
        console.log('ionViewDidLoad About2');
        this.localNotifications.schedule(
                id: 1,
                text: 'Single ILocalNotification',
                data: 'test'
        );
     

并在真实设备上进行测试。如果你在浏览器中搜索，cordova 不可用，所以它会抛出这样的警告

在设备上，结果将是

【讨论】：

您的解决方案有效，我认为我的解决方案也有效。显然我的插件没有正确安装。对于其他遇到麻烦的人，请确保安装答案中的插件并使用最新版本的 Ionic CLI。

@krillebimbim 即使我面临“无法安装'de.appplant.cordova.plugin.local-notification'：CordovaError：无法通过注册表获取插件cordova-plugin-app-event”。在 ionic 3 中安装通知插件时出错。你也面临同样的问题吗？你是怎么解决的？

安装这个解决了我的问题，“ionic cordova plugin add de.appplant.cordova.plugin.local-notification”