javascript - How to implement back button in Angular for navigating previous page? - Stack Overflow

admin管理员组

文章数量:1406462

I have a list-ponent where I want to keep the pageIndex value by setting some variables in another class just before navigating to another ponent let's say x-ponent. Then, when navigating back to the list-ponent, I want to get the previously set pageIndex so that open that page instead of opening the first page on the datatable. So, what is an alegant way to fix this problem without using a service or subcribtion? I can use another class, but not a service. I tried to retrieve the set values from a class, but pageIndex value is undefined when trying to retrieve it.

Any help would be appreciated.

I have a list-ponent where I want to keep the pageIndex value by setting some variables in another class just before navigating to another ponent let's say x-ponent. Then, when navigating back to the list-ponent, I want to get the previously set pageIndex so that open that page instead of opening the first page on the datatable. So, what is an alegant way to fix this problem without using a service or subcribtion? I can use another class, but not a service. I tried to retrieve the set values from a class, but pageIndex value is undefined when trying to retrieve it.

Any help would be appreciated.

• javascript
• angular
• typescript
• routes

Share Follow edited Dec 21, 2020 at 19:27 Jack asked Dec 21, 2020 at 19:14 JackJack 1

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You can also have the pageIndex as a URL param of the page where list-ponent is rendered.

Inject in your ctor:

private route: ActivatedRoute

Then in your ngOnInit do something like:

this.route.params.subscribe((params: any) => {
    if (params.pageIndex) {
        this.pageIndex = params.pageIndex;
    }
});

In your routing module your URL should match: some-url/:pageIndex. And when paging back and forth in the list the URL should be updated accordingly.

You can use sessionStorage.

In x-ponent, save pageIndex with this.

sessionStorage.setItem('pageIndex', pageIndex);

Then load this value in list-ponent like this.

public pageIndex = Number(sessionStorage.getItem('pageIndex') ?? 0);

import { Location } from '@angular/mon';

previousUrl: string;
constructor(private location: Location,private router: Router){ }

goBackFunction(){
router.events
.pipe(filter(event => event instanceof NavigationEnd))
.subscribe((event: NavigationEnd) => {

      console.log('prev:', event.url);
      this.previousUrl = event.url;
});

 this.location.back()  
}

It will take you to the previous page :)

本文标签： javascriptHow to implement back button in Angular for navigating previous pageStack Overflow