Question

在我的AppComponent中，我正在进行启动检查。如果使用具有sessionId的查询字符串打开应用程序，那么我们很乐意去，我想将它们路由到/ application路径。否则我希望它们导航到/ create-session路径。问题是，params订阅在app看到查询参数之前触发一次，这意味着始终触发else语句并且用户被自动重定向到create-session路径。

this.route.queryParams.subscribe(params => {
  if(params.sid) {
    this.ngRedux.dispatch(this.sessionActions.setSessionId(params.sid));
    this.router.navigate(['application'])
  }
  else{
    this.router.navigate(['create-session'])
  }
})

我尝试过一些东西来过滤掉订阅而没有像这样的数据：

.first((val, idx, src)=> Object.keys(val).length > 0)

但是当没有查询参数时它不会触发。有没有办法获得params的即时快照而无需订阅ActivatedRoute？

注意：此订阅发生在ngOnInit

中

Answer 1

您可以使用Angular中的guards来实现此功能。

创建一个这样的警卫：

@Injectable()
export class SomeGuard implements CanActivate {
  constructor(
    private router: Router) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot) {
      console.log('state params', state.root.queryParams);

      if (state.root.queryParams.sid){
        this.router.navigate(['application'])
      } else {
        this.router.navigate(['create-session'])
      }

      return false;
  }
}

然后在您要执行此逻辑的路线上将防护添加到canActivate：

export const routes: Routes = [
  {
    path: '**',
    component: SomeComponent,
    canActivate: [SomeGuard]
  }
];

不要忘记在提供商中添加警卫：

@NgModule({
  providers: [SomeGuard]
})

立即访问Angular 4查询参数？

1 个答案: