如何才能更有效地使用路由器可观察对象？例如，如果我需要加载单个路由参数（假设我们有一个像/我需要订阅路由器事件，然后订阅路由参数以获取值。这需要两个订阅和两个取消订阅。
我想：
样品
export class SomeComponent implements OnInit, OnDestroy {
private routerSub: Subscription;
private routeSub: Subscription;
someResource: Observable<SomeResourceType>;
constructor(private someService: SomeService,
private route: ActivatedRoute,
private router: Router) {
this.routerSub = this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
this.routeSub = this.route.params.subscribe((params) => {
if (params['id']) {
this.someResource = this.someService.findById(params['id']);
// will access the resource using async pipe later
}
});
}
});
}
ngOnInit(): void {
}
ngOnDestroy(): void {
this.routerSub.unsubscribe();
this.routeSub.unsubscribe();
}
}
如果由于某种原因组件没有被角破坏，但仍然使用不同的路由参数stackblitz加载，则需要事件订阅来刷新数据示例：https://stackblitz.com/edit/angular-router-basic-example-695kpb
您可以使用激活的路线。
constructor(route: ActivatedRoute) {
this.id$ = route.params
.pipe(pluck('id'));
}
你可以使用pluck。pluck（'id'）与map（value=
id;
private _destroyed$ = new Subject<any>();
constructor(route: ActivatedRoute) {
route.params
.pipe(
takeUntil(this._destroyed$),
pluck('id')
).subscribe(id => this.id = id);
}
ngOnDestroy() {
this._destroyed$.next();
this._destroyed$.complete();
}
试试这个：
constructor(private route: ActivatedRoute) {}
ngOnInit() {
const id = this.route.snapshot.params['id'];
}
只要没有人发布更好的解决方案，这里是我的：
我定义了一个RouterHelperService，这使得这个过程变得更加容易。其中一个问题是，如果您尝试直接在服务中注入ActivatedRoute实例，您将缺少参数，因此您需要将其从组件传递给服务。
import { Injectable } from '@angular/core';
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { filter, flatMap, map } from 'rxjs/operators';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class RouterHelperService {
constructor(private router: Router) {
}
onNavigationEndReadParamByKey(route: ActivatedRoute, key: string): Observable<string> {
return this.router.events.pipe(
filter(event => event instanceof NavigationEnd),
flatMap(() => {
return route.params.pipe(
filter(params => params[key]),
map(params => params[key])
);
})
);
}
}
这样，在我的组件中，我可以通过单个调用和单个订阅来调用它。
export class SomeComponent implements OnInit, OnDestroy {
private routeSub: Subscription;
someResource: Observable<SomeResourceType>;
constructor(private someService: SomeService,
private route: ActivatedRoute) {
this.routeSub = this.routerHelper.onNavigationEndReadParamByKey(this.route, 'id').subscribe((id) => {
this.someResource = this.someService.findById(+id); //+id to convert it from a string to a number
});
}
ngOnInit(): void {
}
ngOnDestroy(): void {
this.routeSub.unsubscribe();
}
}
