Pass invisible or hidden parameters using routerLink Angular

Question

I have router link like below:

<button class="take-a-tour-btn" [routerLink]="['/dashboard', {'showTour':'show'}]">

I want to pass parameter showTour. But, when I do this, the parameter is visible in url and I would like to hide it. I have gone through so many references(which says about optional parameters) ,but with no success in my case. How could I solve this?

Answer 1

You can use History state to pass dynamic data to the component you want to navigate to, without adding them into the URL, like so :

this.router.navigateByUrl('/user', { state: { orderId: 1234 } }); 

or

<a [routerLink]="/user" [state]="{ orderId: 1234 }">Go to user's detail</a> 

and you can get it this way

constructor() {   this.router.events    .pipe(filter(e => e instanceof NavigationStart))    .subscribe((e: NavigationStart) => {     const navigation  = this.router.getCurrentNavigation();     this.orderId = navigation.extras.state ? navigation.extras.state.orderId : 0;    });   } 

Answer 2

I'm not sure, if there is a way to do it, because the data need to be presented in the URL string.

My suggestion is using global service which be store needed data. For example:

//some dataService, which store your needed data. @Injectable() export class DataService {     _showTour: string;     set showTour(value: string) {       this._showTour = value;    }     get showTour(): string {        return this._showTour;    }     constructor() {}  } 

and use it in your navigation component in this way:

//your navigation component @Component({     selector: 'my-app',     template: `        <button class="take-a-tour-btn" (click)="onClick()">     ` }) export class SomeComponent {     constructor(private dataService: DataService, private router: Router) { }      onClick() {         this.dataService.showTour = 'show';         this.router.navigate(['/dashboard']);     } } 

You will may use the same service in your Dashboard Component, and get needed value, f.e. in this way:

//your dashboard component @Component({     selector: 'my-dashboard',     template: `        <h1>{{ showTour }}</h1>     ` }) export class DashboardComponent implements OnInit {      showTour: string;      constructor(private dataService: DataService) { }      ngOnInit() {         this.showTour = this.dataService.showTour;     } } 

Answer 3

Use state to pass hidden parameters and history to read 'em.

First component:

this.router.navigate(
      [`/dashboard/roles/${id}`],
      { state: { navSettings: navSettings } });

Second component:

public ngOnInit(): void {
    const id = this.activatedRoute.snapshot.params.id;
    this.initNavSettings(history.state.navSettings);
}