加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

使用routerLink Angular传递不可见或隐藏的参数

发布时间:2020-12-17 07:32:23 所属栏目:安全 来源:网络整理
导读:我有如下路由器链接: button class="take-a-tour-btn" [routerLink]="['/dashboard',{'showTour':'show'}]" 我想传递参数showTour.但是,当我这样做时,参数在url中可见,我想隐藏它.我经历了这么多的引用(关于可选参数的说法),但在我的案例中没有成功.我该怎
我有如下路由器链接:
<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;
    }
}

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读