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');
    });
  }
}