Search code examples
angularroutesangular-routerangular11

when i use router.getCurrentNavigation() inside ngOnInit() it gives me type error but when i use it inside constructor it works fine, why?


Starter -

export class HeaderComponent implements OnInit {

constructor(private route: ActivatedRoute, private router: Router) {}

onClick() {
 const navigationExtras: NavigationExtras = {
   state: {
     transd: 'TRANS001',
     workQueue: false,
     services: 10,
     code: '003',
   },
 };

  this.router.navigate(['/auth'], navigationExtras);
 }
}

AuthComponent - when using inside ngOnInit() :

ngOnInit(): void {

this.authService.authError.subscribe(
  (error) => (this.errorMessage = error)
);

const navigation = this.router.getCurrentNavigation();
const state = navigation.extras.state as {
  transId: string;
  workQueue: boolean;
  services: number;
  code: string;
};

console.dir(state);
}

when using inside ngOnInit() it gives me an error :

core.js:5980 ERROR TypeError: Cannot read property 'extras' of null
    at AuthComponent.ngOnInit (auth.component.ts:26)
    at callHook (core.js:2486)
    at callHooks (core.js:2457)
    at executeInitAndCheckHooks (core.js:2408)`
    at refreshView (core.js:9207)
    at refreshEmbeddedViews (core.js:10312)
    at refreshView (core.js:9216)
    at refreshComponent (core.js:10358)
    at refreshChildComponents (core.js:8989)
    at refreshView (core.js:9242)

but when i place it inside constructor it works fine :

constructor(private authService: AuthService, private router: Router) {    
    const navigation = this.router.getCurrentNavigation();
    const state = navigation.extras.state as {
      transId: string;
      workQueue: boolean;
      services: number;
      code: string;
    };

    console.dir(state);
  }

so, why it works inside constructor but not inside ngOnInit ?


Solution

  • In ngOnInit() you can use history:

    ngOnInit() {
      const state = history.state;
    }
    

    It's necessary to call getCurrentNavigation() inside of the constructor because in ngOnInit() the navigation has finished.