Unable to trigger ngOninit and route.params upon redirection using RouterLink

Question

I'm trying to redirect from one page to another using routerLink, but the redirected link doesn't trigger the ngOnInit() method as well as the ActivatedRoute subscription. The redirected page then freezes but there is no error on the console.

So this is my HTML

<a [routerLink]="route(value.id)">link</i></a>

Then this is my component.ts, which returns the url

route = (id: number) => this.routeService.view(id);

This is the redirected component edit.ts

ngOnInit() {
  this.route.paramMap.pipe(
    takeUntil(this.onDestroy$),
    map(params => console.log(params))
).subscribe(x => 'do something')

}

can you edit the question and explain what are you trying to achieve and what is actually happening? because the question is unclear now. — k0hamed
Does the redirected component render or it doesn't load at all? — k0hamed
[routerLink] expects a string or array of strings not a function call. It won't evaluate the function call. Try replacing [routerLink] with (click). — Jason White
@JasonWhite It needs to be [routerLink] so I could redirect to another page. — Jin

Jin Jin · Accepted Answer · 2019-03-21T02:51:14

I did a little hack, I used NgZone. routerLink directive seems to run outside Angular zone. So instead of using [routerLink]="route(value.id)" I used (click)="route(value.id)" . So this is how it looks like now

HTML:

<a (click)="route(value.id)">link</i></a>

Component:

constructor(private ngZone: NgZone){}

route = (id: number) { 
    const link = this.routeService.view(id);
    this.ngZone.run(() => this.router.navigate(link));
}

Thanks for replying..

Unable to trigger ngOninit and route.params upon redirection using RouterLink

1 Answers