Angular/RxJs 6 - 组合路由参数和查询参数不再有效
Angular/RxJs 6 - combining route params and query params not working anymore
我至少花了 2 个小时试图让版本 6 正常工作,但无济于事。我只是无法同时获得路由参数和查询参数。
这是最接近旧版本的语法,但它只记录查询参数。
我想做的是将它包装在全局路由服务中,这样方法调用就干净了,如果发生任何其他更新,我可以在一个地方进行更改。
import {BehaviorSubject, combineLatest, Observable} from 'rxjs';
constructor(private router: Router, private route: ActivatedRoute)
// body of constructor left out
// Combine them both into a single observable
const urlParams: Observable<any> = combineLatest(
this.route.params,
this.route.queryParams,
(params, queryParams) => ({ ...params, ...queryParams})
);
urlParams.subscribe(x => console.log(x));
我还注意到 combinedLatest 出于某种原因不在 'rxjs/operators' 中。
Observable.combineLatest 也不行。
谢谢。
combineLatest 提供一种数组格式的输出...
请尝试使用如下
t$ = combineLatest(
this.route.params,
this.route.queryParams
).pipe(
map(results => ({params: results[0], queryParams: results[1]}))
);
对于 rxjs6,没有更多的结果选择器,因此您需要使用 'map'。迁移文档 rxjs migration guide
import {BehaviorSubject, combineLatest, Observable} from 'rxjs';
import {map} from 'rxjs/operators'
const urlParams: Observable<any> = combineLatest(
this.route.params,
this.route.queryParams
).pipe(
map(([params, queryParams]) => ({...params, ...queryParams}))
);
urlParams.subscribe(x => console.log(x));
我偶然发现了同样的问题,接受的答案是有效的,但如果您同时更改路由参数和查询参数,订阅将被触发两次。
为了避免这种情况,我使用了 distinctUntilChanged
:
combineLatest(
this.route.params.pipe(distinctUntilChanged(), takeUntil(this.ngUnsubscribe)),
this.route.queryParams.pipe(distinctUntilChanged(), takeUntil(this.ngUnsubscribe))
)
.pipe(map(([params, queryParams]) => ({params, queryParams})))
.subscribe(({params, queryParams}) => {
console.log(params, queryParams);
});
我至少花了 2 个小时试图让版本 6 正常工作,但无济于事。我只是无法同时获得路由参数和查询参数。
这是最接近旧版本的语法,但它只记录查询参数。
我想做的是将它包装在全局路由服务中,这样方法调用就干净了,如果发生任何其他更新,我可以在一个地方进行更改。
import {BehaviorSubject, combineLatest, Observable} from 'rxjs';
constructor(private router: Router, private route: ActivatedRoute)
// body of constructor left out
// Combine them both into a single observable
const urlParams: Observable<any> = combineLatest(
this.route.params,
this.route.queryParams,
(params, queryParams) => ({ ...params, ...queryParams})
);
urlParams.subscribe(x => console.log(x));
我还注意到 combinedLatest 出于某种原因不在 'rxjs/operators' 中。 Observable.combineLatest 也不行。
谢谢。
combineLatest 提供一种数组格式的输出... 请尝试使用如下
t$ = combineLatest(
this.route.params,
this.route.queryParams
).pipe(
map(results => ({params: results[0], queryParams: results[1]}))
);
对于 rxjs6,没有更多的结果选择器,因此您需要使用 'map'。迁移文档 rxjs migration guide
import {BehaviorSubject, combineLatest, Observable} from 'rxjs';
import {map} from 'rxjs/operators'
const urlParams: Observable<any> = combineLatest(
this.route.params,
this.route.queryParams
).pipe(
map(([params, queryParams]) => ({...params, ...queryParams}))
);
urlParams.subscribe(x => console.log(x));
我偶然发现了同样的问题,接受的答案是有效的,但如果您同时更改路由参数和查询参数,订阅将被触发两次。
为了避免这种情况,我使用了 distinctUntilChanged
:
combineLatest(
this.route.params.pipe(distinctUntilChanged(), takeUntil(this.ngUnsubscribe)),
this.route.queryParams.pipe(distinctUntilChanged(), takeUntil(this.ngUnsubscribe))
)
.pipe(map(([params, queryParams]) => ({params, queryParams})))
.subscribe(({params, queryParams}) => {
console.log(params, queryParams);
});