angular6 监听url查询参数变化刷新页面

快照snapshot取到的参数是组件第一次渲染时候的参数，当我们在页面中需要根据不同的url查询参数显示不同的内容时，快照就不能满足我们的需要了，这时候就要用ActivatedRoute服务的queryParamMap参数，queryParamMap是一个Observable对象，每次路由变化，都会emit一个(params: ParamMap)对象,然后用params.get()方法来获取参数。

假设url查询参数：?id=123 这种

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  id:string;
  constructor(private route: ActivatedRoute) {}
  ngOnInit() {
    this.route.queryParamMap.subscribe((params: ParamMap) => {
      this.id = params.get('id');
    });
  }
}