《Angular2入门系列实践》——如何实现路由传值

背景

     Angular项目下一个路由如何接收到上一个路由url中的参数id？

解决方案

    1.父路由routes配置方式：

export const  EvaluationQuestionnaireRoute=[
    {
    path:':edit/:id', //必须是路径名:/id
    component:EditQuestionnaireComponent
    },

    2.跳转传参方式：

模板：
<div [routerLink]="['edit',1]">页面跳转传值div>

控制器：
import { Router } from '@angular/router';
this.router.navigateByUrl("edit/"+q.id);
this.router.navigate(["edit/",q.id]);

    3.子路由获取父路由参数：

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

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

constructor(public route: ActivatedRoute) {}

  ngOnInit() {
        //通过订阅这种形式来接收父级页面传过来的值                              this.activatedRoute.params.subscribe(
      data=>{
      this.id=data.id;
      console.log(data.id)}
    );
        //或者通过
    this.route.params['value']['id']
        //或者通过
    this.id = this.activatedRoute.snapshot.params['id'];
  }

}

结语

   本篇主要目的是解决路由传值的问题，想更多了解关于路由问题，请看我的更多文章！