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

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 2

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

Try using skipLocationChange property.

Answer 3

in Angular 7 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

const navigation = this.router.getCurrentNavigation();
this.orderId = navigation.extras.state ? navigation.extras.state.orderId : 0;

Answer 4

@AddWeb @SailiUnique

Your solution works but you don't have to put the property in the [routLink]. The correct place is outside it as any property.

Like this:

<div class="row inline rowItem" [routerLink]="['/businessPartnerDetails']" [queryParams]="{ id: bpItem.id, bp: bpItem.companyName}" skipLocationChange=true (click)="onViewDetails(bpItem)">

Answer 5

The response isn't exactly efficient because the skipLocationChange don't change the current route on browser url and if you want to go back later, you backed from the first route.

For example if you were on home page and use this:

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

if you want to back from dashboard to home you can't do that with object location, in this case, you need to use Router and specify an exactly route (/dashboard).

But this in much cases this is a bad solution, and the browser routing don't change from /home to dashboard.

Inconvenients:

• The browser don't refresh to the correct url
• You can't go back from dashboard (current route)

You can create the data service or check the official angular router docs