angular5项目下利用router navigate实现页面跳转

Angular路由与参数传递
本文详细介绍了在Angular中如何使用Router进行页面跳转,并通过query参数传递数据。具体包括:如何在组件中引入Router,定义触发跳转的方法,以及如何在目标页面接收和使用这些参数。

1.需要引入

import {Router} from '@angular/router';

2.ts中添加触发方法

    navigate(){
        this.router.navigate(['targetRouter'], {
            queryParams: {
                id: this.selectedId,
            }
        });
    }

targetRouter:需要跳转到的路径

3.目标路径接受参数

  constructor(
        injector: Injector,
        private activatedRoute: ActivatedRoute,
        public router: Router
    ) {
        super(injector);
    }
在页面初始化时接受参数

   ngOnInit() {
        this.activatedRoute.queryParams.subscribe(queryParams => {
            let id = queryParams.id;
            if(queryParams!=null){
            ...
            }
         

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值