美文网首页
angular路由传递参数

angular路由传递参数

作者: 陈小爬_ | 来源:发表于2019-05-20 15:28 被阅读0次

路由配置

const routes: Routes = [
    {
        path: 'share', component: ShareComponent, canActivateChild: [AuthGuard],
        children: [
            { path: '', redirectTo: 'sharelist' },
            { path: 'sharelist', component: ShareListComponent, canDeactivate: [CanDeactivateGuard] },
            { path: 'sharedetails/:l', component: ShareDetailsComponent, canDeactivate: [CanDeactivateGuard] }
        ]
    }
];

跳转前页面

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

constructor(private router: Router) {}

seeDetails(l: any) {
        this.router.navigate(['/share/sharedetails', JSON.stringify(l)]);
}

跳转后页面

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

constructor(private activeRoute: ActivatedRoute) {
        this.activeRoute.params.subscribe((params: Params) => {
            this.inte = JSON.parse(params['l']);
        });

        // this.inte = this.activeRoute.snapshot.params["l"];
    }

相关文章

  • angular路由传递参数

    路由配置 跳转前页面 跳转后页面

  • ng路由传参

    angular的路由传递参数一共有三种方式 固定参数、动态路由参数、查询参数三种叫法是本人习惯叫法 非官方 仅供...

  • Angular路由及参数传递

    生成一个新的项目 --routing会为我们生成路由相关的模块 路由相关的对象: routes 路由的配置,...

  • react-router-dom部分笔记

    1,向路由组建传递参数 (1)params 参数 路由链接(携带参数): 注册路由(声明接收) 接收参数this....

  • vue传参

    一、路由传参 1.1、 明文传参 ( 特点:URL路径 显示传递的参数 ) 路由跳转: 传递参数 接收参数 1....

  • Angular学习笔记-路由及参数传递

    生成一个新的项目 --routing会为我们生成路由相关的模块 路由相关的对象: routes 路由的配置,保存了...

  • React native数据通信

    导航器传递参数给路由往导航栏传递参数RN与原生模块通信 导航器传递参数给路由 示例:同导航器内的TestScree...

  • React中向路由组件传递参数

    1. params参数 路由链接(传递参数): 注册路由(声明接收): 接收参数:const {id,title}...

  • 第三十六节:Vue路由:Vue-router路由传参

    前沿: vue-router的路由跳转时传递参数有两种方式,: 一种是路由参数, 通过定义动态路由传递参数 另一种...

  • 第三十六节:Vue路由:Vue-router路由传参

    前沿: vue-router的路由跳转时传递参数有两种方式,: 一种是路由参数, 通过定义动态路由传递参数 另一种...

网友评论

      本文标题:angular路由传递参数

      本文链接:https://www.haomeiwen.com/subject/ekmkzqtx.html