如果未提供查询参数，则 Angular 9 重定向

Question

我有一个路由，只有当用户单击电子邮件中的链接并使用 url 中的有效查询参数重定向时，他们才能访问该路由。如果没有提供参数，我想重定向到 404 页面未找到组件，如下所示。

this.route.queryParams.subscribe(params => {
      if (params.myParam) {
        //do something
      } else {
        // redirect to 404
      }
    })

我遇到的问题是查询参数在 ngOnInit() 中被初始化为一个空对象。我已经使用 rjxs 来等待参数可以像这样访问

this.route.queryParamMap.pipe(
      filter(paramMap => paramMap.has('myParam')),
      map(paramMap => paramMap.get('myParam')),
      take(1)
    ).subscribe(myParam => doSomething(myParam));

但是我对 rxjs 操作符不是很精通，现在我被困在 paramMap 已经完成初始化并且找不到参数的情况下如何实际重定向。

Answer 1

这是许多应用程序中的问题，因为参数和查询参数是作为行为主体实现的，通过等待NavigationEnd 事件来解决这个问题，其中查询参数肯定已经设置...

   const navEnd$ = this.router.events.pipe(filter(e => e instanceof NavigationEnd));
   navEnd$.pipe(withLatestFrom(this.route.queryParams)).subscribe(
     ([navEnd, queryParams]) => {
       if (queryParams.myParam) {
         // do the thing
       } else {
         // navigate
       }
     }
   )

Answer 2

如果未设置 queryParam，要路由到 404，请执行以下操作：

import { Router } from '@angular/router'

class ...

constructor(private router: Router, private route: ActivatedRoute){
this.route.queryParamMap.pipe(
  skip(1),
  map(paramMap => paramMap.get('myParam')),
  tap(param=>{if(param=={} || param==undefined)this.router.navigateByUrl("/404.html")})
).subscribe(myParam => doSomething(myParam));

}

您可以在构造函数中启动订阅，这样您将获得第一个值，然后再通过任何其他方法（如 ngOninit）进行修改。