美文网首页
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 路由传值

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