如何從Angular的ActivatedRoute資料結構中獲得運作時路由資訊

看個具體的例子：

路由配置資訊：

const CUSTOM_ROUTES: Routes = [
  { path: "custom/:id", component: RouteDemoComponent }
];      

RouteDemoComponent的實作：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-route-demo',
  templateUrl: './route-demo.component.html'
})
export class RouteDemoComponent implements OnInit {

  id: Observable<string>;
  constructor(route: ActivatedRoute) { 
    this.id = route.params.pipe(map(p => p.id));
    const url: Observable<string> = route.url.pipe(map(segments => segments.join('')));
    // route.data includes both `data` and `resolve`
    const user = route.data.pipe(map(d => d));
  }

  ngOnInit(): void {
  }
}
      

浏覽器位址欄裡輸入：

http://localhost:4200/custom/1

運作時檢視ActivatedRoute資料結構的值：

凡是behaviorSubject這種Observable，其_value字段裡包含了subscribe被調用後，會emit的實際值：