Pass invisible or hidden parameters using routerLink Angular

Question

I have router link like below:

I want t

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

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

Answer 3

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

Try using skipLocationChange property.

Answer 4

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

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

Answer 6

Try this in your component:(I am using it with Angular 5.x)

this.router.navigate(['/dashboard'], {skipLocationChange: true, replaceUrl: false});