使用routerLink Angular传递不可见或隐藏的参数 [英] Pass invisible or hidden parameters using routerLink Angular

问题描述

我有如下所示的路由器链接:

I have router link like below:

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

我想传递参数showTour.但是，当我这样做时，该参数在url中可见，并且我想将其隐藏.我已经阅读了很多参考资料(其中提到了可选参数)，但在我的案例中没有成功.我该怎么解决?

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?

推荐答案

我不确定是否有办法做到这一点，因为数据需要显示在URL字符串中.

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

这篇关于使用routerLink Angular传递不可见或隐藏的参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！