当我在 ngOnInit() 中使用 router.getCurrentNavigation() 时，它会给我类型错误，但是当我在构造函数中使用它时，它工作正常，为什么？

Question

首发 -

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 - 在 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);
}

在 ngOnInit() 内部使用时出现错误：

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)

但是当我把它放在构造函数中时它工作正常:

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);
  }

所以，为什么它在构造函数内部工作，而不是在 ngOnInit 内部工作？

Answer 1

在 ngOnInit() 中你可以使用历史：

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

有必要在构造函数中调用 getCurrentNavigation()，因为在 ngOnInit() 中导航已经完成。

当我在 ngOnInit() 中使用 router.getCurrentNavigation() 时，它会给我类型错误，但是当我在构造函数中使用它时，它工作正常，为什么？

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

angular

routes

angular-router

angular11