如何在 Ionic 3 中发送本地通知?
How do I send local notifcation in Ionic 3?
我正在创建一个 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"
点击按钮还是没有任何显示。你知道怎么做吗?
这就是我们创建简单本地通知的方式。
安装插件。
$ 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 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"
点击按钮还是没有任何显示。你知道怎么做吗?
这就是我们创建简单本地通知的方式。
安装插件。
$ 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 不可用,所以它会抛出这样的警告
在设备上,结果将是