javascript - Angular Router (Routing) - Cancel navigation to different route (url) - Stack Overflow

admin管理员组

文章数量:1355655

I have a ponent that should be destroyed each time the changes (for example, each time the user click to go back on history), but before the destruction of the ponent, I want to show a message asking if the user wants to leave without saving the changes.

The user can select the "no" answer, which the app should stop the navigation in this case. If the user selects the "yes" answer, the navigation should continue.

My question is, how can I do that?

Follows an example:

export class ListConfigurationsComponent implements OnInit, OnDestroy {
   ...
   constructor(
        ...
        private router: Router) {

        router.events.subscribe((val) => {
            //Cancel the option here
        });
   }
}

I have a ponent that should be destroyed each time the changes (for example, each time the user click to go back on history), but before the destruction of the ponent, I want to show a message asking if the user wants to leave without saving the changes.

The user can select the "no" answer, which the app should stop the navigation in this case. If the user selects the "yes" answer, the navigation should continue.

My question is, how can I do that?

Follows an example:

export class ListConfigurationsComponent implements OnInit, OnDestroy {
   ...
   constructor(
        ...
        private router: Router) {

        router.events.subscribe((val) => {
            //Cancel the option here
        });
   }
}

• javascript
• html
• angular
• typescript

Share Improve this question Follow edited Sep 26, 2019 at 13:52 Ricardo Rocha asked Sep 26, 2019 at 12:05 Ricardo RochaRicardo Rocha 16.3k2323 gold badges8484 silver badges140140 bronze badges 2

• 2 I think you are looking for CanDeactivate guard - angular.io/api/router/CanDeactivate – user2216584 Commented Sep 26, 2019 at 12:06
• @user2216584 I believe it is not what he is looking for, since route guard is for an entire ponent. – Kiril1512 Commented Sep 26, 2019 at 12:18

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

try this using restoredState property, it's defined when the navigation is triggered by a popstate event otherwise it's null, check this

router.events.pipe(
  filter(( event: NavigationEvent ) => {
        return( event instanceof NavigationStart );
       })
).subscribe((event: NavigationStart) => {
   if (event.restoredState ) {
      // display you confirmation modal
    }
})

You're looking for CanDeactivate Guard. Check this article, it describes how to make generic CanDeactivate strategy: https://medium./@tobias.ljungstrom/how-to-use-a-custom-dialogue-with-the-candeactivate-route-guard-in-angular-385616470b6a

One version could be that you don't use the [routerLink] in your template. Use the (click) handler instead to call your function which checks if the user should be redirected.

In your html

(click) = "checkDialog()";

If so in your ts just use

this.router.navigate(['/next-page']);

in your condition

A better approach would be to check for the navigationTrigger property on the NavigationEvent and check the previous state ID in the restoredState property as

if(event instanceof NavigationStart && event.navigationTrigger == "popstate" && event.restoredState)

Stackblitz at https://stackblitz./edit/angular-check-navigation-back-fron-through-browser

本文标签： javascriptAngular Router (Routing)Cancel navigation to different route (url)Stack Overflow