angular7中路由传值

最新推荐文章于 2024-12-13 10:52:37 发布

yw00yw

最新推荐文章于 2024-12-13 10:52:37 发布

阅读量3.5k

点赞数 1

分类专栏： angular 文章标签： angular7 angular7路由 angular路由传参

本文链接：https://blog.youkuaiyun.com/yw00yw/article/details/94007626

版权

angular 专栏收录该内容

63 篇文章

订阅专栏

本文详细介绍了在Angular中如何在不同路由间双向传递参数的方法，包括从起始路由到目标路由，以及从目标路由返回起始路由的完整过程。通过实例展示了如何使用Router和ActivatedRoute服务来实现参数的传递与接收。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在路由传值中，除了从开始路由到目标路由传值之外，还可以从目标路由传值到开始路由。

意思就是从开始路由传值到目标路由成功之后，执行完操作之后又从目标路由返回到了开始路由并携带参数。

一、起始路由向目标路由传递参数

获取路由对象

import { Router, ActivatedRoute, NavigationExtras} from '@angular/router';

注入

constructor(
    public router: Router,
    public activatedRoute: ActivatedRoute
) {}

获取当前激活的路由

 this.nowRouter = this.activatedRoute['_routerState'].snapshot.url;

跳转并传参

// 详情
FaultDetails(item: any) {
    const routerParams: NavigationExtras  = {
        queryParams: {
            nowRouter: this.nowRouter,   // 字符串
            nowRowTableData: JSON.stringify(item),    // 对象
            searchForm: JSON.stringify(this.searchForm)   // 对象
        }
    };
    this.router.navigate(['/faultDetails'], routerParams);
}

二、目标路由接收参数

获取路由对象

import { Router, ActivatedRoute, NavigationExtras} from '@angular/router';

获取参数

ngOnInit() {

        this.activatedRoute.queryParams.subscribe((data: any) => {

            const nowRowTableData = JSON.parse(data.nowRowTableData);

            const searchForm = JSON.parse(data.searchForm);

            this.searchForm = searchForm;

            // 父级路由
            if (data.nowRouter) {
                // 截取路由，否则报错，如果用到传递过来的路由并返回的时候携带参数，路由可能会不匹配，是因为路由后面多了一些参数，需要截取（第一次ok,第二次失败）
                const index = data.nowRouter.indexOf('?');
                if (index > 0) {
                    const routerUrl = data.nowRouter.substring(0, index);
                    this.parentRouter = routerUrl;
                } else {
                    this.parentRouter = data.nowRouter;
                }
            }

            // 当前的故障列表数据
            this.faultListData = nowRowTableData;

            // 调用故障详情
            this.getFaultDetails(nowRowTableData.RelationGUID);

            // 申请状态
            this.applyProState = nowRowTableData.ApplyProState;

            // 是否撤销
            this.isCancel = nowRowTableData.IsCancel;
        });
    }

三、目标路由向起始路由传递参数

获取路由对象

import { Router, ActivatedRoute, NavigationExtras} from '@angular/router';

注入同上
传参

 // 返回到父级
 backParent() {
     const routerParams: NavigationExtras  = {
         queryParams: {
             searchForm: JSON.stringify(this.searchForm),
         }
     };
     this.router.navigate([this.parentRouter], routerParams);
 }

四、起始路由接收参数

// 获取当前激活的路由传递过来的数据
this.activatedRoute.queryParams.subscribe((data: any) => {
    // 传递过来的搜索条件
    if (JSON.stringify(data) !== '{}') {
        const searchForm = JSON.parse(data.searchForm);
        // this.searchForm.startTime = searchForm.startTime;
        // this.searchForm.endTime = searchForm.endTime;
        // this.searchForm.ferSiteID = searchForm.ferSiteID;
        this.searchForm = searchForm;
        this.searchOrderData(null);
    }
});