I have 3 route paths: Contact, Customers, Greeting
Desired behavior:
From Customers page, and then navigating to Contact page, I want the page to scroll to the middle of the page. I only want this to happen if going from Customers -> Contact, not from any other route -> Contact. and not from refreshing the page.
MY ATTEMPT (not working):
From customers, I have a function:
goHome(){
const navigationExtras: NavigationExtras = { state: { middle: 'middle' } };
this.router.navigate(['contact'], navigationExtras);
}
When it navigates back to Contact:
const navigation = this.router.getCurrentNavigation();
const state = navigation?.extras.state as { middle: any };
console.log(this.router.getCurrentNavigation());
if (state){
if ( state['middle'] === 'middle'){
setTimeout(() => {
this.middle.nativeElement.scrollIntoView({
block: 'start',
behavior: "smooth"
});
}, 1500);
}
}
Problem: When I refresh the page, it still scrolls down to the middle section in my contact page. I don't know how to replicate this in stackblitz, but on my local code, it has this behavior. Refreshing on contact page, still scrolls down to the middle.
Stack: https://stackblitz.com/edit/angular-hipega-brjh36?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.css,src%2Fapp%2Fapp-routing.module.ts,src%2Fapp%2Fcontact%2Fcontact.component.html,src%2Fapp%2Fcontact%2Fcontact.component.css,src%2Fapp%2Fcontact%2Fcontact.component.ts,src%2Fapp%2Fcontact%2Fcontact.module.ts,src%2Findex.html,src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fcustomers%2Fcustomers.module.ts,src%2Fapp%2Fcustomers%2Fcustomers.component.ts,src%2Fapp%2Fgreeting%2Fgreeting.module.ts,src%2Fapp%2Fgreeting%2Fgreeting.component.ts,src%2Fapp%2Fapp.component.html
Related
I have a page: customers, where I have a list of customers.
There I have a button to edit the informations'customers.
When I click on this edit button I open a modal in another page: CustomerDetail.
So clicking in editing button I can modify the data in the modal, and when I save date I have a problem. Basically the info in the page customers are not update until I refresh the page.
So in my customerDetail.page.ts, when I click on save:
onUpdateCustomer(customer){
//...code...
updateCustomer.pipe(untilDestroyed(this)).subscribe(
(data) => {
this.loading = false;
this.showingUpdateMessage = true
this.goToCustomers();
},
(error) => {
console.log("error - update customer ", error);
}
);
}
I have tried using goToCustomers but it doesn't work properly
goToCustomers(){
this.router.navigate(["/customers"])
}
I Would not use window.location.reload() but I don't know how to do to have updated data without reload the page.
Imagine to have a page with a table (customers page), when click on edit button I call the other page CustomerDetail as:
openCreateCustomerPage() {
this.router.navigate(["/customerDetails"], {
queryParams: { customerCreate: true },
});
So I open the modal.
I need to handle push notifications and I am using onesignal for it.
Currently I am handling push notifications in my home screen and I am using react-navigation.
componentDidMount() {
OneSignal.addEventListener('received', this.onReceived);
OneSignal.addEventListener('opened', this.onOpened);
}
componentWillUnmount() {
// OneSignal.removeEventListener('received');
// OneSignal.removeEventListener('opened');
}
onReceived(notification) {
console.log('Notification received: ', notification);
}
onOpened = (data) => {
const { notification: { payload } } = data;
if (payload.additionalData) {
if (payload.additionalData.params) {
this.props.navigation.navigate({
routeName: payload.additionalData.route,
params: payload.additionalData.params,
key: payload.notificationID
});
}
}
}
With this code I am able to navigate to a route specified in the data packet of notifications.
Now the problem I face is, I have a screen and I want to refresh my page, for example call getData(); of that component.
With this approach I am able to navigate to that screen and if I get the notification while I am on that screen. with the help of key, I can navigate to that screen.
Lets say I am going to OrderDetail screen and when I get the notification, It navigates to Order Detail,
Home Screen --> Order Detail
and now If I am inside OrderDetail and if I get the notification, It would be
Home Screen ---> Order Detail ---> Order Detail
...and so on'
How can I handle push notifications in this case?
Possibly... handle the push notification differently on Home and Detail pages.
Say,on Home page, listen to notification when didFocus, and remove the listener when willBlur. So the handler will action only when a user is on Home. And navigate (route) to "Detail" in the notification handler of Home page.
Likewise, on Detail page, listen to notification when didFocus, and remove the listener when willBlur. While the handler simply updates the content when notification is received.
---edit---
Home:
constructor() {
this.props.navigation.addListener(
'willBlur',() => {
OneSignal.removeEventListener('received');
OneSignal.removeEventListener('opened');
}
);
this.props.navigation.addListener(
'didFocus',() => {
OneSignal.addEventListener('received');
OneSignal.addEventListener('opened');
}
);
}
// handler implementation is the same
Detail:
//same lifecycle implementation
// but different handler
onOpened = (data) => {
const { notification: { payload } } = data;
if (payload.additionalData) {
if (payload.additionalData.params) {
this.setState(paramsUsedByDetail: payload.additionalData.params);
}
}
I am using a global provider to open pages by passing the navigation controller from the page to the provider method. Is there any other way to do this better?
Main objective is not to repeat my self. Open page method I use in the globalProvider.ts is as follows. currentActive page is stored in a variable of the provider in case user logins to the app he will be redirected to the last active page (currentActive)
globalProvider.ts
openPage(navCtrl, page, params, setActive = true) {
this.showLoading();
if (setActive) {
this.currentActive = { root: page, params: params };
} else {
this.currentActive = { root: 'HomePage', params: null };
}
navCtrl.setRoot(page, params).then(res => {
if (!res) {
this.showError('Please login to view page!');
navCtrl.setRoot('LoginPage', {
activePage: this.currentActive.root
}).then(res => {
this.hideLoading();
}).catch(err => {
this.hideLoading();
});
}
this.hideLoading();
}).catch(error => {
this.hideLoading();
});
}
I don't think there is anything bad with this practice. I also do similar logic to avoid repeating the show loading and hide loading logic in every page.
However I also keep one more parameter, to help me decide if the page should be set as root or should be pushed on current stack.
This also helps me to track page views for analytics from a central place.
I have a little bit of a problem with the angular navigator 2
I'm in my detail projects page and I have a component that is in my detail page that will show me the next project.
So in my component I recall the same page which is' /projects/id
when I click in the navigation bar it changes the id well but the content does not change and I do not understand why because I make a router. navigate of my page.
my init controller projectDetail
ngOnInit() {
this.nextProjectId = this.activedRoute.snapshot.queryParams.nextProject;
const id = this.activedRoute.snapshot.params.id
this.projectsService.projectsAll().then( (projects) => {
if (projects[this.nextProjectId]) {
this.nextProject = projects[this.nextProjectId];
} else {
this.nextProject = projects[0];
}
});
this.projectsService.projectFind(id).then( project => this.project = project);
}
my function navigate in component nextProject
nextProjectDetail(id, nextProject) {
const next = parseInt(nextProject, 0) + 1
this.router.navigate(['projects/', id], { queryParams: {nextProject: next }}).then(
function(){
console.log('navigate success');
},
function(){
console.log('navigate failure');
}
);
}
I even tried to use this function in the init of detail projects to see when the url changes but it doesn't work.
this.params.subscribe(params => {
console.log("dfsd");
});
there is another way to refresh the same page in a component on the same page?
thanks
I have two forms, one is called profile, the other is settings. I'm using introjs to have a guided tour through these two forms. If I only move forward through the tour using the introjs 'Next Step' button there are no issues (first image). But, if I use the browser back or forward button, my forms look like the second image.
Code on profile page that utilize introjs:
runTour() {
if (this.state.showTour === true) {
const tourObj = {
userId: Meteor.userId(),
page: 'profile',
};
introJs.introJs().setOption('doneLabel', 'Next step').start().oncomplete(()
=> {
changeIntroTour.call(tourObj);
browserHistory.push('/user/settings');
})
.onexit(() => {
changeIntroTour.call(tourObj);
});
}
}
componentWillReceiveProps(nextProps) {
this.existingSettings(nextProps);
if (nextProps.intro.length > 0) {
this.setState({
showTour: nextProps.intro[0].profileTour,
}, () => {
this.runTour();
});
}
}
The issue was I was not calling introJs.exit() on componentWillUnmount. This was keeping my instance of introJs running from one component to the next which caused the bug.