我已經在網路（StackOverflow、Rxjs、博客等）上搜索了我的具體案例的答案，但我沒有找到任何我想要的東西。
在我的 Angular 組件中，我有以下內容：
ngOnInit(): void {
this.activatedRoute.queryParams.subscribe((params: any) => {
if (!!params.page) {
if (params.page <= 1) this.skip = 0;
else this.skip = (params.page - 1) * this.limit;
}
});
this.activatedRoute.params.subscribe((params: any) => {
this.filter = params.filter;
this.term = params.term;
this.year = params.year;
this.month = params.month;
});
this.activatedRoute.data.subscribe((data: any) => {
this.setProvider(data.route);
this.loadData(data.route);
});
}
我的問題是我需要queryParams和訂閱在訂閱發生之前params完成并分配公共值（并且可以按任何順序完成，因為它們彼此之間沒有依賴關系）。dataqueryParamsparams
在我見過的所有示例中，它們顯示了每個訂閱依賴于前一個訂閱的位置，并使用前一個訂閱的值（作為變數傳遞）。如果我使用純函式，我可能會看到這是有益的，但鑒于 Angular 中的代碼隱藏也可用作 ViewModel，我只是設定公共變數，然后在setProviderandloadData函式中參考它們。
下面的代碼有效（基本上鏈接管道），但鑒于我對 Rxjs 的所有知識有限，我不確定是否有更清潔、更有效的方法來撰寫它。回傳一個 observable 只是為了在管道的下一個鏈中使用它的值似乎相當愚蠢。
ngOnInit(): void {
this.activatedRoute.queryParams.pipe(concatMap((query: any) => {
if (!!query.page) {
if (query.page <= 1) this.skip = 0;
else this.skip = (query.page - 1) * this.limit;
}
return this.activatedRoute.params;
})).pipe(concatMap((params: any) => {
this.filter = params.filter;
this.term = params.term;
this.year = params.year;
this.month = params.month;
return this.activatedRoute.data;
})).subscribe((data: any) => {
this.setProvider(data.route);
this.loadData(data.route);
});
}
感謝大家！
編輯
以下也適用于concat：
ngOnInit(): void {
concat(
this.activatedRoute.queryParams.pipe((q: any) : any => {
let query = q.getValue();
if (!!query.page) {
if (query.page <= 1) this.skip = 0;
else this.skip = (query.page - 1) * this.limit;
}
}),
this.activatedRoute.params.pipe((p: any) : any => {
let params = p.getValue();
this.filter = params.filter;
this.term = params.term;
this.year = params.year;
this.month = params.month;
}),
this.activatedRoute.data.pipe((d: any) : any => {
let data = d.getValue();
this.setProvider(data.route);
this.loadData(data.route);
})
);
}
uj5u.com熱心網友回復：
感謝 Joosep 的回答。由于不推薦使用他推薦的函式簽名，我已經對其進行了更新。
這是更新的版本：
ngOnInit(): void {
combineLatest([
this.activatedRoute.queryParams,
this.activatedRoute.params,
this.activatedRoute.data,
]).subscribe(
([queryParams, params, data]) => {
if (!!queryParams['page'] && queryParams['page'] <= 1) {
this.skip = 0;
} else {
this.skip = (queryParams['page'] - 1) * this.limit;
}
if (params) {
this.filter = params['filter'];
this.term = params['term'];
this.year = params['year'];
this.month = params['month'];
}
if (queryParams && params && data) {
this.setProvider(data['route']);
this.loadData(data['route']);
}
}
);
}
uj5u.com熱心網友回復：
如果必須通過手動訂閱來完成，我會結合最新的 activateRoute queryParams，params并data與基本的 if 檢查在適當的時候運行最后一部分。
可能是這樣的：
combineLatest(
this.activatedRoute.queryParams,
this.activatedRoute.params,
this.activatedRoute.data,
(queryParams: Params, params: Params, data: any) => ({
queryParams
params,
data,
})
).subscribe((res: {queryParams: Params; params: Params; data: any }) => {
if (!!queryParams.page && queryParams.page <= 1) {
this.skip = 0;
} else {
this.skip = (queryParams.page - 1) * this.limit;
}
if (params) {
this.filter = params.filter;
this.term = params.term;
this.year = params.year;
this.month = params.month;
}
if (queryParams && params && data) {
this.setProvider(data.route);
this.loadData(data.route);
}
});
如果可能，還要嘗試強制執行強型別。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/491838.html
上一篇：錯誤型別錯誤：無法在Angular中讀取未定義afterViewInit的屬性
下一篇：異步管道不更新視圖