如何在显示任何 UI 之前在 Angular 应用程序中捕获查询参数

Question

在我的 Angular 应用程序中显示任何 UI 之前，我需要从 URL http://localhost:4200/?user=123456 捕获 queryParam。

实际上我正在使用这个 :

import {Component, OnInit} from '@angular/core';
import {ActivatedRoute} from "@angular/router";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
  title = 'params-lab';

  constructor(private route: ActivatedRoute) {
    this.route.queryParams.subscribe(params => {
      console.log('Params = ' + JSON.stringify(params));
    });
  }
  ngOnInit() {

  }
}

但是在开发控制台中我第一次得到 Params = {} 然后 Params = {"user":"131245"}.

这种方式不是我所期望的，因为我需要检查参数是否正常才能重定向到正确的组件，如下所述：

Answer 1

你可以通过两种不同的方式解决这个问题

从后端发送一个额外的参数作为 uservalid = true（简单的解决方案但不是有效的方法）
使用额外的标志实施 Route Guard，您可以在组件中使用具体的 RBAC。

https://codeburst.io/understanding-angular-guards-347b452e1892

Answer 2

构造函数中的订阅很少会return 一个值的速度和你想要的一样快。于是，引入一个var来保存参数：

parameters: string = null;

然后在你的构造函数中给它一个值：

this.route.queryParams.subscribe(params => {
    if (params) {
        this.parameters = JSON.stringify(params);
        // send parameters to method that will
        // work with parameters, i.e. your logic to load
        // different pages based on parameters value
    }
});

您可以将一些加载器内容放入 app.component 以显示，直到 parameters 可通过订阅获得：

<ng-container *ngIf="!parameters">
    (loading content: text, image, spinner, whatever)
<ng-container>

或者省略任何 html 内容。

Answer 3

ActivatedRoute 为您提供有关与在插座中加载的组件关联的路由的信息。如果您订阅根组件中可观察到的 queryParams，您将看到每一个变化。据我了解您正确使用案例，这不是您想要的。我认为您应该在目标路由上注册一个单独的组件并将重定向逻辑放在那里。

RouterModule.forRoot([
   { path: '', component: RedirectComponent },
]),

和

class RedirectComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}
  ngOnInit() {
    this.route.queryParams.subscribe((params) => {
      console.log('Params = ' + JSON.stringify(params));
      if (/*...*/) {
         // redirect from here
      }
    });
  }
}

https://stackblitz.com/edit/angular-ivy-wjyejt?file=src/app/redirect/redirect.component.ts

Answer 4

我选择了旧的 JavaScript 解决方案以避免任何订阅问题：这是我的代码，它按预期工作：

ngOnInit() {

    const urlParams = new URLSearchParams(window.location.search);
    const user = urlParams.get('user');
    const requesterType = urlParams.get('espace');
    ...
    }
}

如何在显示任何 UI 之前在 Angular 应用程序中捕获查询参数

How to capture query params in Angular app before showing any UI

angular

url

url-parameters

query-parameters