Angular8 路由事件使用

利用Angular提供得路由系統能夠比較方便地構建項目得框架結構，同時還內置了路由對象事件，能夠幫助解決開發中較爲常見的問題。

路由事件監聽

在app組件中注入Router類，訂閱路由的event事件：

constructor(
    private http: HttpClient,
    private router: Router,
    private activatedRoute: ActivatedRoute,
){}
  ngOnInit(): void {
    this.router.events.pipe(
      tap(o => console.log(o))
    ).subscribe(route => {
      console.log(route);
    });
  }

路由狀態 有路由導航開始，導航結束；路由配置加載開始，配置加載結束；路由識別，子路由激活開始，激活結束；路由激活開始與結束等。這些路由事件均有各自最佳的場景，可是先後順序基本是不變的，導航開始是第一個，當其他事件結束，最後導航結束，咱們能夠根據這個狀態去設置業務需求，先查看通常的路由事件中，event包含的內容。

NavigationStart（導航開始）

ActivationEnd（路由激活成功）

NavigationStart（導航結束）

id 即爲 navigationId ，被用於保存歷史記錄，以供瀏覽器導航回來。只有當此次導航是被 popstate 事件觸發時，它纔不爲空。路由器會把一個 navigationId 賦予每一次路由器過渡/導航。即便用戶點擊了瀏覽器的後退按鈕，也會建立一個新的 navigationId。 因此，從路由器的視角來看，路由器永遠不會 "後退"。藉助 restoredState 及其 navigationId，你能夠區分開建立新狀態和 popstate 事件的行爲。 在 popstate 時，你能夠恢復一些之前記錄的狀態（如滾動到的位置）。
navigationTrigger 爲導航過程當中的觸發器，映射關係爲：
router.navigateByUrl / router.navigate => imperative
popstate => popstate
hashchange => hashchange
data 爲路由設置中提供的路由信息，例如標題等；
其它諸如參數等信息也能夠經過這個對象獲取。

---

網站標題設置

準確地獲取標題，調用內置的Title.setTitle 設置網站標題。咱們只須要在路由激活下獲取data便可。

this.router.events.pipe(
      // tap(o => console.log(o))
      filter(event => event instanceof NavigationEnd),
      map(() => this.activatedRoute),
      map(route => {
        while (route.firstChild) {
          route = route.firstChild;
        }
        return route;
      }),
      mergeMap(route => {
        return route.data;
      }),
    ).subscribe(route => {
      console.log(route);
});

簡單解釋下上述代碼：
filter 選擇 NavigationEnd 的緣由是找激活路由的快照，只有在導航結束事件只有一次，若是選擇 ActivationEnd 也能夠，可是此事件觸發屢次；
獲取到當前路由，在當前路由的第一個子路油出現的時候返回子路由；
mergeMap 將本來的Observable打平爲數據返回給訂閱者接收，結果爲：

{
    title:'新聞中心'
}

路由參數處理

添加參數：
1.HTML中添加：<a [routerLink]="['/contact']" routerLinkActive="router-link-active" [queryParams]="{id:222}">聯繫咱們</a>
2.

this.router.navigate(['/contact'], {
  queryParams: {
    id: 123456
  }
});
或者
this.router.navigateByUrl('/contact?id=484584');

獲取參數：

constructor(
    private modal: NzModalService,
    private activedRoute: ActivatedRoute
  ) { }

  ngOnInit() {
    this.activedRoute.queryParams.subscribe(params => {
      console.log(params);// { id: 123 }
    });
  }