如何从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的实际值：

更多Jerry的原创文章，尽在：“汪子熙”: