如何在Ionic 3中发送本地通知? [英] How do I send local notifcation in Ionic 3?

查看:392
本文介绍了如何在Ionic 3中发送本地通知?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I'm creating an Ionic 3 application and I need to schedule local notifications. I am just trying to set up a test notification but I can't seem to get it to work. I have tried in an emulator but nothing happens. The LocalNotifications plugin has also been added to my app.module.ts file.

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

Here's my typescript file imports and function:

 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);

}

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

I can see the following object has been passed to the console:

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

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

It still fails to show anything when the button is clicked. Do you know what to do?

推荐答案

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

This is how we create a simple local notification.


  1. 安装插件。

  1. Install the plugin.

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


包含版本3 CLI,使用

incase of version 3 CLI, use

离子cordova插件添加de.appplant.cordova.plugin.local-notification


  1. 添加到module.ts文件

  1. add to module.ts file

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


  • 添加到提供者列表中

  • add into providers list

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


  • 导入页面我们想要使用的地方并像这样使用..(出于演示目的,我打电话给它viewdidload方法)

  • import into the page wherever we want to use and use it like this..(for demonstration purpose, I called it on viewdidload method)

    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,因此会发出类似警告

    and test it on real device. if you search in browser, cordova is not available so it will throw a warning like this

    ,结果将

    这篇关于如何在Ionic 3中发送本地通知?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

    查看全文
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆