我有如下路由器链接：
<button class="take-a-tour-btn" [routerLink]="['/dashboard',{'showTour':'show'}]">
我想传递参数showTour.但是,当我这样做时,参数在url中可见,我想隐藏它.我经历了这么多的引用(关于可选参数的说法),但在我的案例中没有成功.我该怎么解决这个问题？
我不确定,是否有办法,因为数据需要在URL字符串中显示.
我的建议是使用存储所需数据的全局服务.例如：
//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() {}
}
并以这种方式在导航组件中使用它：
//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']);
}
}
您可以在仪表板组件中使用相同的服务,并获得所需的值,例如：通过这种方式：
//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;
}
}
