看个具体的例子:
路由配置信息:
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的原创文章,尽在:“汪子熙”: