Angular - Issue with routerLink and state

Question

From an html page I want to route to another page using routerLink and state. There's no issues with <a> tag, during ngOnInit in landing page, I can retrieve state as expected. Using <button> tag home page is navigate as well but state results undefined.

What's my wrong?

html of login page

<button routerLink="/home" [state]="navExtra.state">
    Go Home Page via button
</button>
<a routerLink="/home" [state]="navExtra.state">Go Home Page via a</a>

ts of login page

import { Component, OnInit } from '@angular/core';
import { NavigationExtras } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss']
})
export class LoginPage implements OnInit {
  navExtra: NavigationExtras = {
    state: { data: { a: 'a', b: 'b' } }
  };
  constructor() {}

  ngOnInit() {}
}

ts of home page

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss']
})
export class HomePage implements OnInit {
  constructor(
    private router: Router
  ) {}

  ngOnInit() {
    console.log(this.router.getCurrentNavigation().extras.state);
  }
}

hi, i do not see navExtra defined in your component ts file. — ErvTheDev
– ErvTheDev, Commented Sep 30, 2019 at 12:55
Sorry my wrong, I don't remeber to paste ts of starting page — Xilo
– Xilo, Commented Sep 30, 2019 at 12:58
@ErvinLlojku same issue also with the last correction you have proposed... — Xilo
– Xilo, Commented Sep 30, 2019 at 13:49
i too experienced this issue with Angular: 8.2.14, seems like [state] directive is only working with "a" tag — janbee
– janbee, Commented Jan 28, 2020 at 2:39

AVJT82 · Accepted Answer · 2019-09-30 16:50:24Z

I don't think it is possible to pass state through a button. If we inspect the source code of routerLink, we can see...

when not an a tag:

@Directive({selector: ':not(a):not(area)[routerLink]'})

state isn't included in extras:

@HostListener('click')
onClick(): boolean {
  const extras = {
    skipLocationChange: attrBoolValue(this.skipLocationChange),
    replaceUrl: attrBoolValue(this.replaceUrl),
  };
  this.router.navigateByUrl(this.urlTree, extras);
  return true;
}

source

whereas when we have an a tag:

@Directive({selector: 'a[routerLink],area[routerLink]'})

it is included:

@HostListener('click', [/** .... **/])
onClick(/** .... **/): boolean {
  // .....
  const extras = {
    skipLocationChange: attrBoolValue(this.skipLocationChange),
    replaceUrl: attrBoolValue(this.replaceUrl),
    state: this.state // <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< here!
  };
  this.router.navigateByUrl(this.urlTree, extras);
  return false;
}

source

So your option is to style that link to look like a button, or then call a function on button click which performs the navigation, like presented in other answer, here I kindly refer to that code posted by AbolfazlR:

this.router.navigate(['home'], this.navExtra);

Abolfazl Roshanzamir · Accepted Answer · 2019-09-30 13:34:59Z

0

You can navigate to your desired page with click event and set state:

<button (click)="test()">Test</button>

and test method in your component:

test(){
  const navigationExtras: NavigationExtras = {state: {example: 'This is an example'}};
  this.router.navigate(['test'], navigationExtras);
}

in the destination you can retrieve data like the following :

example:string;
constructor(private router: Router) { 
   const navigation = this.router.getCurrentNavigation();
   const state = navigation.extras.state as {example: string};
   this.example = state.example;
}

Stackblitz Here.

answered Sep 30, 2019 at 13:34

Abolfazl Roshanzamir

15.1k9 gold badges76 silver badges83 bronze badges

2 Comments

Xilo Over a year ago

I know about that, but I'm looking a way to do that from html also from <button> tag and not only fro <a> tag.

Abolfazl Roshanzamir Over a year ago

@Xilo - I tried a lot but It did not work ( from Html also from <button> tag); the only method above worked.

Tristan · Accepted Answer · 2024-11-21 15:25:09Z

0

Please, for the love of everything sacred never use a button as a link.

They are semantically wrong. They don't allow right click and open in a new tab. They confuse screen readers. They are terrible.

It is easy enough to style a link like a button if that is what you are trying to achieve.

answered Nov 21, 2024 at 15:25

Tristan

2193 silver badges13 bronze badges

Collectives™ on Stack Overflow

Angular - Issue with routerLink and state

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related