javascript - Angular 2 router global state change event - Stack Overflow

admin管理员组

文章数量:1026989

There is a global event that we can use when state change/start that not per ponent unlike the Component Lifecycle Hooks ? like in UI-router:

  $rootScope.$on("$stateChangeStart", function() {})

There is a global event that we can use when state change/start that not per ponent unlike the Component Lifecycle Hooks ? like in UI-router:

  $rootScope.$on("$stateChangeStart", function() {})

• javascript
• angularjs

Share Improve this question Follow edited Feb 11, 2019 at 3:46 user10747134 asked Dec 21, 2015 at 7:29 user233232user233232 6,21799 gold badges3030 silver badges3737 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

It depends on what you want to achieve, but it is possible to inject Router in your top level ponent and .subscribe() to it to get the stream of states.

I used it to build functionality that changes browser's title based on current state. That being said you can think about it as equivalent of $stateChangeSuccess and $stateChangeFailureevents from Angular 1.

The code will be:

constructor(router: Router) {
    router.subscribe(successHandler, failureHandler);
}

Also take a look on OnActivate which is also related to these concepts.

My code, for ui-router, has ended up looking something like the following to replace ng1 $rootScope $stateChangeSuccess for Angular2:

import { Component } from '@angular/core';
import { TransitionService } from "ui-router-ng2";

@Component({selector: 'app-stage-tag',template: '...'})
class AppComponent {
  constructor(public transitionService: TransitionService){
    transitionService.onSuccess({to:'*'}, transition=>{
      console.log('state', transition._targetState._definition)
      console.log('params', transition._targetState._params)
    })
  }
}

There is a global event that we can use when state change/start that not per ponent unlike the Component Lifecycle Hooks ? like in UI-router:

  $rootScope.$on("$stateChangeStart", function() {})

There is a global event that we can use when state change/start that not per ponent unlike the Component Lifecycle Hooks ? like in UI-router:

  $rootScope.$on("$stateChangeStart", function() {})

• javascript
• angularjs

Share Improve this question Follow edited Feb 11, 2019 at 3:46 user10747134 asked Dec 21, 2015 at 7:29 user233232user233232 6,21799 gold badges3030 silver badges3737 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

It depends on what you want to achieve, but it is possible to inject Router in your top level ponent and .subscribe() to it to get the stream of states.

I used it to build functionality that changes browser's title based on current state. That being said you can think about it as equivalent of $stateChangeSuccess and $stateChangeFailureevents from Angular 1.

The code will be:

constructor(router: Router) {
    router.subscribe(successHandler, failureHandler);
}

Also take a look on OnActivate which is also related to these concepts.

My code, for ui-router, has ended up looking something like the following to replace ng1 $rootScope $stateChangeSuccess for Angular2:

import { Component } from '@angular/core';
import { TransitionService } from "ui-router-ng2";

@Component({selector: 'app-stage-tag',template: '...'})
class AppComponent {
  constructor(public transitionService: TransitionService){
    transitionService.onSuccess({to:'*'}, transition=>{
      console.log('state', transition._targetState._definition)
      console.log('params', transition._targetState._params)
    })
  }
}

本文标签： javascriptAngular 2 router global state change eventStack Overflow