Angular2.0—路由传参

Angular2.0—路由传参

1. 首先使用脚手架创建项目

友情链接：Angular2.0 —构建项目的流程以及使用ng-zorro

2. 创建组件news和children

友情链接：Angular2.0—路由跳转

3 编写代码

// new.html
<a href="###" [routerLink]="['/news/child']" routerLinkActive='active' [queryParams]="{'id':1}">child</a>

// child.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {
sign;
  constructor( private route:ActivatedRoute) { }

  ngOnInit() {
    this.sign = this.route.snapshot.queryParams["id"];//得到参数
    console.log(this.sign);//打印参数
  }

}