TL;DR：我如何知道 ActivatedRoute 何時完成了對 QueryParams 的決議，即使沒有？
在我的 Angular 13 應用程式中，我需要在初始化與服務器通信的服務之前獲取一個可選的查詢引數。
此邏輯發生在根組件中（因為我無法確定訪問者將登陸哪個頁面），因此在初始化路由之前加載組件。因此，在和事件this.route.snapshot.queryParamMap中都是空的。ngOnInitngAfterViewInit
我知道我可以訂閱由回傳的 observable this.route.queryParamMap.subscribe，當 url 中有查詢引數時，這可以正常作業，但是如果沒有可用的 QueryParams，這不會觸發 - 因此，我不確定何時決議完成，因此何時開始連接到服務器。
我嘗試設定initialNavigation為，enabledBlocking但這似乎沒有幫助，直到呼叫 ngAfterViewInit 事件一段時間后，queryParams 仍然不可用。
我的后備解決方案是自己決議查詢字串，但是當 Angular 內置了兼容的決議器時，我不想引入另一個 url 決議庫。
uj5u.com熱心網友回復：
我聽了所有路由器事件并用它來查找一些引數。如果存在可選引數 jwt，我們可以運行該服務。
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
constructor(private router: Router) {
this.router.events.subscribe((event) => {
console.log(event)
const urlParts = event?.url?.split('?');
const jwtValue = urlParts?.find((part) => part.includes('jwt'));
if (jwtValue) {
console.warn('Run service, jwt is:', jwtValue);
// go to service
}
});
}
navigate() {
this.router.navigate(['authenticate'], { queryParams: { jwt: '123' } });
}
}
這是一個示例：https ://stackblitz.com/edit/angular-navigate-with-query-params-atevru?file=src/app/app.component.ts
uj5u.com熱心網友回復：
可行的解決方案是監聽ActivationEnd路由器事件，該事件在路由器完成初始化后觸發。
感謝@Joosep Parts向我提供有關 Router.events 的資訊
private initialized = false;
public constructor(private readonly router: Router, private readonly route: ActivatedRoute)
{
this.router.events.subscribe((data) =>
{
if (!this.initialized && data instanceof ActivationEnd)
{
this.initialized = true;
console.log('Initial query param keys: ' JSON.stringify(route.snapshot.queryParamMap.keys, null, 4));
}
});
}
uj5u.com熱心網友回復：
您可以通過以下方式列印出查詢引數
constructor(private readonly route: Router) {
}
ngOnInit() {
this.route.routerState.root.queryParams.pipe(
map((queryParams) => JSON.stringify(queryParams)),
tap((obj: any) => {
// Do something
console.log(obj);
})
).subscribe();
}
作業演示
在 stackblitz 中，將預覽 URL 更改為類似https://angular-ivy-wk8qmj.stackblitz.io/?test=1
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/479657.html
標籤：有角度的
上一篇：使用PySpark、Python或Shell決議多行CSV
下一篇：行為主體回傳null