I’m using local notifications native plugin on my ionic 3 project (latest version), but when I click on notification and my app is closed the click event is not triggered.
It works when app is in background or foreground.
I use local notifications inside a provider and my on click code is inside its constructor but when app is closed it's not working.
I’ve tried to write code inside platform ready in app/app.component.ts but this approach does not work.
This is my code:
app/app.component.ts
export class MyApp {
#ViewChild(Nav) nav: Nav;
rootPage: any;
constructor(
public platform: Platform,
public menu: MenuController,
public statusBar: StatusBar,
public splashScreen: SplashScreen,
public BeaconServiceProvider: BeaconServiceProvider, /* my provider with local notifications*/
public RemoteServiceProvider: RemoteServiceProvider,
public translate: TranslateService,
public globalization: Globalization,
private oneSignal: OneSignal,
public ga: GoogleAnalytics
) {
......
}
}
My provider
import { HttpClient } from '#angular/common/http';
import { Injectable } from '#angular/core';
import { Storage } from '#ionic/storage';
import { IBeacon } from '#ionic-native/ibeacon';
import { LocalNotifications } from '#ionic-native/local-notifications';
import { RemoteServiceProvider } from '../remote-service/remote-service';
import { StorageProvider } from '../storage/storage';
import { TranslateService } from '#ngx-translate/core';
import { AlertController } from 'ionic-angular';
import { NavController, App} from "ionic-angular/index";
import { GoogleAnalytics } from '#ionic-native/google-analytics';
#Injectable()
export class BeaconServiceProvider {
remoteBeacons: Array<{major: string, minor: string}> = [];
localBeacons: Array<{major: string, minor: string, date: any}> = [];
bluetoothInit: boolean = false;
private navCtrl: NavController;
constructor(
public http: HttpClient,
public alertCtrl: AlertController,
public storage: Storage,
public ibeacon: IBeacon,
public translate: TranslateService,
public localNotifications: LocalNotifications,
public RemoteServiceProvider: RemoteServiceProvider,
public StorageProvider: StorageProvider,
public ga: GoogleAnalytics,
private app: App
) {
console.log('Hello BeaconProvider Provider');
this.localBeacons = this.StorageProvider.localBeacons;
this.navCtrl = this.app.getActiveNav();
let thiz_app = this.app;
let remote = this.RemoteServiceProvider;
this.localNotifications.on("click", function(notification, state){
this.ga.trackEvent(
"Notifiche Beacon (" + remote.version_code + ")",
"Apertura notifica",
"Click sulla notifica beacon " + " {" + notification.message + "}",
1
);
let nav = thiz_app.getActiveNav();
let data = JSON.parse(notification.data);
let page_id = data.page_id;
page_id = page_id.toString();
switch(page_id)
{
case "" :
case "0" :
break;
case "-1" : //Contact Page
if (nav == null)
nav.push('ContactPage');
else if (nav.getActive().component.name != 'ContactPage')
nav.push('ContactPage');
break;
default :
remote.isPageListNew(page_id).subscribe(result => {
let page = result.has_subpages ? 'List2Page' : 'ItemDetailsPage';
if (nav == null)
nav.push(page, { item: result });
else
{
if( nav.getActive().component.name != page)
nav.push(page, { item: result });
else
{
let item_id = nav.getActive().data.item.id;
if (item_id != result.id)
nav.push(page, { item: result });
}
}
});
}
});
}
Any ideas why my code does not work?
Thanks
Related
i send login data to service, after get response in login.ts toast is not difined, how to resolve this ?
i try my toast function in another function withot condition in service its work
this my function for load service login.ts:
import { Component, OnInit } from '#angular/core';
import { NavController, MenuController, PopoverController } from "ionic-angular";
import { TabsInfluencerComponent } from '../../influencer/tabs/tabs';
import { RegisterComponent } from '../register/register';
import { ResetComponent } from '../reset/reset';
import { OfferComponent } from '../../advertiser/offer/offer';
import { ngForm } from '#angular/forms';
import { AuthService } from '../../../services/auth';
import { ToastController } from 'ionic-angular';
#Component({
templateUrl: 'login.component.html',
})
export class LoginComponent implements OnInit {
constructor(
public nav:NavController,
public menu:MenuController,
public popover: PopoverController,
private AuthService : AuthService,
private toastCtrl: ToastController) {
}
responseData : any;
public isChoose: boolean = false;
public isshowP: boolean = false;
//login and get data in service
login(form: ngForm){
this.AuthService.login(form.value.email, form.value.password)
.then(function(data) {
if(data.success == true){
localStorage.setItem('userToken',data.token);
localStorage.setItem('userData',JSON.stringify(data.user));
}else{
let toast = this.toastCtrl.create({
message: data.error,
duration: 3000
});
toast.present();
}
})
.catch(function(error) {
console.log(error);
})
}
}
this my service auth.ts:
import { Injectable } from '#angular/core';
import { HttpClient, HttpHeaders } from '#angular/common/http';
import { map } from 'rxjs/operators'
#Injectable()
export class AuthService {
private loginUrl : string = 'http://localhost:8000/api/login';
data : any;
constructor(private http: HttpClient){}
//function for login
login(email : string, password :string){
const body = {email : email, password : password};
return new Promise(resolve => {
this.http.post(this.loginUrl, body)
.subscribe(data => {
this.data = data;
resolve(this.data);
});
});
}
register(email : string, password :string){
}
}
after run i have error like this :
TypeError: Cannot read property 'toastCtrl' of undefined
In this case it is a problem with your this reference in your login.ts.
.then(function(data) {
...
let toast = this.toastCtrl.create({
message: data.error,
duration: 3000
});
...
})
The this is referring the anonymous function in your then block, but you want to refer back to your LoginComponent class.
How to solve this?
You could use arrow functions, that are really popular right now.
.then((data) => {
...
let toast = this.toastCtrl.create({
message: data.error,
duration: 3000
});
...
})
I have been trying to insert a share button for a post in my app that is able to use the default apps installed in the android phone and can not seem to find a way through.
This is how my post.ts file looks like
import { Component } from '#angular/core';
import { NavParams, NavController, AlertController } from 'ionic-angular';
.
.
import { SocialSharing } from '#ionic-native/social-sharing';
/**
* Generated class for the PostPage page.
*/
#Component({
selector: 'page-post',
templateUrl: 'post.html'
})
export class PostPage {
post: any;
user: string;
comments: Array<any> = new Array<any>();
categories: Array<any> = new Array<any>();
morePagesAvailable: boolean = true;
constructor(
public navParams: NavParams,
public navCtrl: NavController,
public alertCtrl: AlertController,
private socialSharing: SocialSharing
) {
}
ionViewWillEnter(){
this.morePagesAvailable = true;
this.post = this.navParams.get('item');
Observable.forkJoin(
this.getAuthorData(),
this.getCategories(),
this.getComments())
.subscribe(data => {
this.user = data[0].name;
this.categories = data[1];
this.comments = data[2];
});
}
getAuthorData(){
return this.wordpressService.getAuthor(this.post.author);
}
getCategories(){
return this.wordpressService.getPostCategories(this.post);
}
getComments(){
return this.wordpressService.getComments(this.post.id);
}
loadMoreComments(infiniteScroll) {
let page = (this.comments.length/10) + 1;
this.wordpressService.getComments(this.post.id, page)
.subscribe(data => {
for(let item of data){
this.comments.push(item);
}
infiniteScroll.complete();
}, err => {
console.log(err);
this.morePagesAvailable = false;
})
}
goToCategoryPosts(categoryId, categoryTitle){
this.navCtrl.push(HomePage, {
id: categoryId,
title: categoryTitle
})
}
// Social sharing function is here
sharePost() {
this.socialSharing.share("Post Excerpt", "Post Title", "Post Image URL", "Post URL")
.then(() => {
console.log("sharePost: Success");
}).catch(() => {
console.error("sharePost: failed");
});
}
}
Problem
How do insert the post title, post url post image (REST API - JSON) into this.socialSharing.share("Post Excerpt", "Post Title", "Post Image URL", "Post URL")
so that the share button can look more like this
<button ion-fab class="btn share" mini (click)="sharePost()"></button>
EDIT
I have managed to make it work using
sharePost() {
this.socialSharing.share(this.post.excerpt.rendered, this.post.title.rendered, this.post.images.large, this.post.link)
.then(() => {
console.log("sharePost: Success");
}).catch(() => {
console.error("sharePost: failed");
});
}
However when i share like using gmail, the html special characters display
e.g title shows: catering & Cleaning Services
Excerpt shows: <p>Some text[…]</p>
How do i get rid of those html characters and just show some clean text.?
Thank you
One way i removed html tag from my wordpress post was to create a pipe and i pass the excerpt through the pipe before it gets rendered to the view
Pipe.ts was like so
import { Pipe, PipeTransform } from '#angular/core';
/**
* Generated class for the RemovehtmltagsPipe pipe.
*
* See https://angular.io/api/core/Pipe for more info on Angular Pipes.
*/
#Pipe({
name: 'RemovehtmltagsPipe',
})
export class RemovehtmltagsPipe implements PipeTransform {
/**
* Takes a value and makes it lowercase.
*/
transform(value: string) {
if (value) {
let result = value.replace(/<\/?[^>]+>/gi, "");
return result;
}
else {
}
}
}
Then i added the pipe as export in my component's module.ts
details.module.ts was like so
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '#angular/core';
import { IonicPageModule } from 'ionic-angular';
import { DetailsPage } from './details';
import { RemovehtmltagsPipe } from
'../../pipes/removehtmltags/removehtmltags';
#NgModule({
declarations: [
DetailsPage,
],
imports: [
IonicPageModule.forChild(DetailsPage),
],
exports: [RemovehtmltagsPipe],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class DetailsPageModule {}
Finally used the pipe inside my html code
details.html
<ion-row class="white-bg" padding>
<ion-col>
<h1 class="title">{{article.title.rendered | RemovehtmltagsPipe}}</h1>
<p class="date">Published: {{article.modified.split('T')[0]}} {{article.modified.split('T')[1]}}</p>
</ion-col>
</ion-row>
This should get rid of any html tags in your post.Hope this helps
So I'm actually loosing my mind. I'm new to Angular 2 and I'm trying to understand how to let sibling child components comunicate between each other.
I have n child components that can play an Audio file.
The goal is to stop playing component if someone is started.
E.G. : component 1 is played, I play start on component 2, component 1 is stopped, component 2 is played.
I tried with shared service with no luck and also trying with EventEmitter comunicating from child to parent but it is not working.
I cannot figure out how to notify all components at once.
RegistrationComponent ( child )
import {Component, Input, Output, EventEmitter} from '#angular/core';
import {Path} from "./data-model";
import {MediaPlugin} from '#ionic-native/media';
import {Platform} from 'ionic-angular';
import {SocialSharing} from '#ionic-native/social-sharing';
import {RegistrationService} from './registration.service';
#Component({
selector: 'registration',
template: `
<div class="reg__name">{{ url.name }}</div>
<button ion-button color="secondary" item-right clear large (click)="toggle(url.path);">
<ion-icon [name]="playing ? 'md-square' : 'md-play'"></ion-icon>
</button>`,
providers: [
MediaPlugin,
SocialSharing,
RegistrationService
]
})
export class RegistrationComponent {
#Input() url: Path;
#Input() someonePlaying: boolean = false;
#Output() onPlayed = new EventEmitter<boolean>();
playing: boolean = false;
mediaContainer: any;
path: string;
constructor(private media: MediaPlugin,
private platform: Platform,
private socialSharing: SocialSharing,
private service: RegistrationService) {
this.path = "assets/audio";
// service.playing.subscribe(val => this.onSomeonePlaying(val));
}
ngOnChanges() {
console.log(this.someonePlaying);
}
toggle(filename) {
this.playing
? this.stop()
: this.play(filename)
}
play(fileName) {
const mp3URL = this.getMediaURL(`${this.path}/${fileName}`);
this.mediaContainer = this.media.create(mp3URL);
this.mediaContainer.play();
this.playing = true;
this.onPlayed.emit(true);
}
stop() {
this.mediaContainer.stop();
this.playing = false;
// this.service.stop();
}
share() {
this.socialSharing.shareViaWhatsApp("Condividi su Whatsapp", "", "");
}
onSomeonePlaying(val: boolean) {
console.log(val);
}
getMediaURL(s) {
let isAndroid = this.platform.is("android");
return isAndroid ? `/android_asset/www/${s}` : s;
}
}
Portion of home.html that prints the components
<ion-item *ngFor="let url of currentUrls">
<registration (onPlayed)="onPlayed($event)"
[(someonePlaying)] = "globalPlaying"
[url]="url"></registration>
</ion-item>
*home.ts**
import {Component} from '#angular/core';
import {NavController} from 'ionic-angular';
import {Registrations, Registration} from './data-model';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
path: string;
urls: Array<any>;
currentUrls: Array<{name: string, path: string}>;
globalPlaying: boolean = false;
constructor(public navCtrl: NavController) {
this.path = "assets/audio";
this.urls = Registrations;
this.currentUrls = [];
for (let i = 0; i < this.urls.length; i++) {
this.currentUrls = this.currentUrls.concat(this.urls[i]["paths"]);
}
}
onChange(key) {
this.currentUrls = this.filter(key);
}
onPlayed(val){
console.log("global playing", val);
this.globalPlaying = true;
}
filter(key) {
if (!key || key === "all")
return this.findAll(this.urls);
return this.findWhere(this.urls, key)["paths"];
}
findAll(collection) {
let array = [];
for (let i = 0; i < collection.length; i++) {
array = array.concat(collection[i]["paths"]);
}
return array;
}
findWhere(collection, key) {
for (let i = 0; i < collection.length; i++) {
if (collection[i]["id"] === key)
return collection[i];
}
}
}
You should subscribe to EventEmitter to catch the events. You need a service with an EventEmitter:
#Injectable()
export class MyService
{
myEventEmiter:EventEmitter<void> = new EventEmitter<void>();
}
Then inject service into your component and subscribe to it to catch the events:
contsruct(protected myService:MyService){}
ngOnInit()
{
this.myService.subscribe(
() => { //An event occurs }
);
}
At the other hand in another component you should emit the EventEmitter to create new event:
this.myService.emit();
I used an event to notify other instances to hide, of my date-picker component.
Please follow
event-broadcasting-in-angular-2
You have to create a broadcaster and messageEvent.
I am building an app that does an auto login for the user when app starts if it was closed without logging out the last time. This is done by setting a local storage value at successful login and reading it in the constructor of the landing page, which is the login page.
I used ionic build android -release to build and app worked fine. But it takes about 10 sec to load. After some search, I found building the app with --prod can reduce the load time and it did reduce my app load time to 4 sec.
But now the app can't read local storage value at the start. No errors., but, it just returns the value as null. In other pages the app can read the local storage though. Looks like some needed components are not fully loaded, when the app reaches the landing page. But, by the time user logins manually those are loaded. How do I implement an auto login while reducing the load time?
import { Component } from '#angular/core';
import { NavController, MenuController, NavParams } from 'ionic-angular';
import { AuthService } from '../../providers/auth-service';
import { Global } from '../../providers/global';
import { HomePage } from '../home/home';
import { Storage } from '#ionic/storage';
import { Network } from 'ionic-native';
#Component({
selector: 'page-login',
templateUrl: 'login.html'
})
export class LoginPage {
loginUserID: string = '';
loginUserPass: string = '';
showLogin = false;
constructor(private menu: MenuController, private navCtrl: NavController, private auth: AuthService, private global: Global, private storage: Storage, private navParams: NavParams) {
this.storage.get('user_id').then((value) => {
if(this.navParams.get('showLogin')){
this.showLogin = true;
}
else{
if(value && value != null){
this.navCtrl.setRoot(HomePage);
}
else{
this.showLogin = true;
}
}
});
if(this.global.hardwareBackAction != null){
this.global.hardwareBackAction();
}
}
ionViewDidLoad() {
this.menu.swipeEnable(false, 'side-menu');
}
public login() {
if (Network.type == 'none') {
this.global.showAlert('Information', 'No internet access');
}
else {
this.global.showLoading();
this.auth.login(this.loginUserID, this.loginUserPass).subscribe(allowed => {
this.global.loading.dismiss();
if (allowed) {
setTimeout(() => {
this.storage.set('user_id', this.loginUserID);
this.navCtrl.setRoot(HomePage);
});
}
},
error => {
this.showError(error);
});
}
}
showError(text) {
setTimeout(() => {
this.global.loading.dismiss();
});
this.global.showAlert('Error', text);
}
}
When I tap physical Android Button I've got the next error:
Unhandled exception java.lang.IndexOutOfBoundsException: setSpan
(2..2) ends beyound length 0
Here is my app.routing.ts
import { LoginComponent } from "./pages/login/login.component";
import { CarwashComponent } from "./pages/carwash/carwash.component";
import { NewOrderComponent } from "./pages/new_order/new-order.component";
import { ProfileComponent } from "./pages/profile/profile.component";
import { OrderDetailComponent } from "./pages/order/order-detail/order-detail.component";
export const routes = [
{ path: "", component: LoginComponent },
{ path: "profile", component: ProfileComponent},
{ path: "carwash", component: CarwashComponent },
{ path: "order-detail/:order_id", component: OrderDetailComponent },
{ path: "new_order", component: NewOrderComponent}
];
export const navigatableComponents = [
LoginComponent,
CarwashComponent,
ProfileComponent,
OrderDetailComponent,
NewOrderComponent
];
Example of the page:
import { Component, ElementRef, OnInit, ViewChild, OnChanges } from "#angular/core";
import { CarwashService } from "../../../shared/carwash/carwash.service";
import { OrderService } from "../../../shared/order/order.service";
import { Page } from "ui/page";
import { Color } from "color";
import { Router, ActivatedRoute, Params } from "#angular/router";
import { TimePicker } from "ui/time-picker";
import { DatePicker } from "ui/date-picker";
import { StoredData } from "../../../shared/config"
import * as application from "application";
#Component({
selector: "order-detail",
providers: [CarwashService, OrderService],
templateUrl: "pages/order/order-detail/order-detail.html",
styleUrls: ["pages/order/order-detail/order-detail-common.css", "pages/order/order-detail/order-detail.css"]
})
export class OrderDetailComponent implements OnInit {
constructor(
private page: Page,
private router: Router,
private carwashService: CarwashService,
private orderService: OrderService,
private route: ActivatedRoute){}
ngOnInit() {... }
checkStatus(){...}
addOrderTotalName(){...}
changeStatus(status){...}
closeOrder(){...}
cancelOrder(){...}
}
What's wrong?enter image description here
Normally the physical back button will behave as going back to previous page, but I don't know why this happens to you. You can try to define again the function for the back button like this:
var application = require("application")
var topmost = require("ui/frame").topmost;
var activity = application.android.startActivity ||
application.android.foregroundActivity ||
frameModule.topmost().android.currentActivity ||
frameModule.topmost().android.activity;
var lastPress;
activity.onBackPressed = function() {
topmost().goBack;
}