美文网首页
Angular2 路由传值

Angular2 路由传值

作者: SevenLonely | 来源:发表于2017-05-25 14:07 被阅读0次

在接收值得组件里面导入ActivatedRoute

路由设置页面传参


{ path: 'view/:mid' , component: ViewComponent},

父级页面路由跳转的实现


<div [routerLink]="['/email/view',mail.id]">页面跳转传值</div>

子页面的Component通过下面的方法可以获取到父页面路由传过来的参数<b>mail.id</b>


//

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from "@angular/router";

@Component({
  selector: 'app-view',
  templateUrl: './view.component.html',
  styleUrls: ['./view.component.scss']
})
export class ViewComponent implements OnInit {

  constructor(public route: ActivatedRoute) {

        //通过这种形式来接收父级页面传过来的值
        this.route.params.subscribe(data=>console.log(data.mid))

        //或者通过
        this.route.params['value']['mid']
   }

  ngOnInit() {
  }

}

相关文章

  • Angular2 路由传值

    在接收值得组件里面导入ActivatedRoute 路由设置页面传参 父级页面路由跳转的实现 子页面的Compon...

  • 路由跳转(非命名路由)

    单纯跳转: 路由传值跳转: 路由传值返回跳转:

  • vue动态路由传值和get传值

    1、动态路由传值2、get传值 不同路由传值:动态路由 1、配置动态路由,main.js 2、在列表页NewsLi...

  • Flutter命名路由的使用和传值

    1.注册路由 2.路由传参和获取反向传的值 3.获取路由正向传的值

  • ionic4-传递参数

    环境 路由传值 方式一(单个值) 路由定义 跳转 或者 接收 方式二(多个值) 跳转 接收 组件间传值 父 -> ...

  • node-koa-路由传值

    一、Koa路由post传值 二、Koa路由get传值 在koa2中GET传值通过request接收,但是接收的方法...

  • Vue组件间关系及六种传值方式

    前言: 六种传值方式为: 属性传值 $refs $parent 通知传值(广播传值) 本地传值 路由传值 在介绍组...

  • 组件间传值之@Input

    组件间传值,可以用Input或者路由传值。例如:由列表页进入详情页1、如果用路由传值,就只需要在路由中添加id参数...

  • vue路由的介绍(二)--vue动态路由和get的传值

    vue动态路由和get的传值---->同属于路由的传参 1,vue动态路由: 动态路由的配置: ①,在配置路由时加...

  • vue周总结

    1. 传值 不详细介绍传值方法,只是列一下可用的 1.1 路由传值 1.2 编程式传值 1.3 props传值(父...

网友评论

      本文标题:Angular2 路由传值

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