如何在angular中的导航开始前添加查询参数？

Question

假设我有两个组件 A 和 B. 组件A导航到 /a?random=random 和B导航到 /b. 我想加 authUser 在导航开始前查询参数，所以最终结果应该是这样的。/a?random=random&authUser=1, /b?authUser=1 问题是，组件的url A 样子 /a?authUser=1 在附上 authUser 查询参数不 /a?random=random&authUser=1.

这里是 爆料 链接。

// App component
 ngOnInit() {
    this.router.events.subscribe((event) => {
      if(event instanceof NavigationStart) {
         if (!event.url.includes('authUser')) {
          // remove queryParams
          const url = event.url.split('?')[0];
          if (url !== '/') {
            // /a/etc => ['a','etc']
            const newUrl = url.split('/').filter(_subUrl => _subUrl);
            this.router.navigate(newUrl, { queryParams: { authUser: '1' }, queryParamsHandling: 'merge' });
          }
        }
      }
    })
  }

  navigateToA() {
    this.router.navigate(['a'], { queryParams: { random: 'random' } });
  }

  navigateToB() {
    this.router.navigate(['b']);
  }

我不想对组件进行修改 A 和 B 因为在实际应用中，我将不得不对每个导航方法进行修改，这将是一个糟糕的做法。

Answer 1

查询参数的例子this.router.navigate([${this.appStatus.baseUrl}predictresult], {queryParams: {vsgid: vsgid, sid: sid, logo: logo}});