如何从不是路由器插座的组件中获取 angular 10+ 中的 URL 参数？

如何解决如何从不是路由器插座的组件中获取 angular 10+ 中的 URL 参数？

我试图在访问 localhost:4200/?loc=en_LSM_US 时获取名为“loc”的 URL GET 参数。该方法的逻辑是，如果loc参数没有发送到实际页面，则计算locale。

我正在尝试使用 this.route.snapshot.queryParamMap.get('loc'); 获取参数，但由于实际组件不是路由器插座，因此路由为空。

appComponent 看起来像这样：

<body>
  <app-header></app-header>
  <router-outlet></router-outlet>
  <app-footer></app-footer>
</body>

这是<app-footer>的代码：

private loc: string[] = [];

constructor(
  private route: ActivatedRoute,private http: HttpClient
) { }

async ngOnInit() {
  await this.getLoc();
}

private async getLoc() {
  var country: string | any;
  var locStr: string | null = await this.route.snapshot.queryParamMap.get('loc');

  if (locStr == null || locStr == '' ) { // There's no loc in URL
    console.log(locStr);
    if (navigator.language.includes('-')) { // navigator.language ~ 'es-MX'
      var locale: string[] = navigator.language.split('-')
      this.loc = [locale[0],'',locale[1]]
    } else { // navigator.language ~ 'es'
      country = await this.http.get("https://api.ipgeolocationapi.com/geolocate/")
      .pipe(map((json: any): 
        Object => {
          return (json['alpha2'] as string)
        })).toPromise();
      this.loc = [navigator.language,country]
    }
  } else { // There's loc in URL
    this.loc = locStr.split('_')
  }
  console.log(this.loc)
}

第一个 console.log(locStr) 输出 null，最后一个 console.log(this.loc) 使用 API 或 navigator.language 输出我的语言环境，尽管 URL 具有不同的语言环境参数 {{1} }.

解决方法

async 和 await 与 promise 一起使用。您的 http.get 返回一个 observable

既然你想使用 await 和 async，你应该切换到 promises 并且不要订阅 observable

所以你的代码将是

private async getLoc() {
    var country: string | any;
    var locStr: string | null = await this.route.snapshot.queryParamMap.get('loc');

    if (locStr == null || locStr == '' ) { // There's no loc in URL
      console.log(locStr);
      if (navigator.language.includes('-')) { // navigator.language ~ 'es-MX'
        var locale: string[] = navigator.language.split('-')
        this.loc = [locale[0],'',locale[1]]
      } else { // navigator.language ~ 'es'



 country = await this.http.get("https://api.ipgeolocationapi.com/geolocate/")
        .pipe(map((json: any): 
            Object => {
              return (json['alpha2'] as string)
            })).toPromise();
        this.loc = [navigator.language,country]
      }


 }
    } else { // There's loc in URL
      this.loc = locStr.split('_')
    }
    console.log(this.loc)
}

使用 Location 中的 @angular/common，您可以使用 Location.path() 获取当前路径。

使用 HttpParams 中的 @angular/common/http，您可以使用 new HttpParams({ fromString: "string" }) 解析字符串中的 http 参数。

所以，这样做：

constructor(
  private Location:Location
) { }

ngOnInit() {
  console.log(new HttpParams({ fromString: this.Location.path()}))
}

应该在您的网络控制台中打印如下内容：/current?param=value&etc=0，其中 /current 是您的实际路线，任何参数都在 ? 之后。因此，只需清理字符串以消除从 0 到 ? 的字符，然后将字符串传递给 HttpParams 就可以了。

您正在尝试等待一个可观察对象。那是行不通的。更好地使用 RXJS：

private getLoc(): Observable<Array<string>> {
    return this.route.queryParamMap.pipe(
        switchMap(({ loc }) => {
            if (loc) {
                return of(locStr.split('-'))
            } else {
                const lang = navigator.language;
                const isLangIncludeDash = lang.includes('-');

                if (isLangIncludeDash) {
                    const langArr = lang.split('');
                    return of([langArr[0],langArr[1]]);
                } else {
                    const api$ = this.http.get("https://api.ipgeolocationapi.com/geolocate/");
                    return api$.pipe(map(({ alpha2 }) => [lang,alpha2]));
                }
            }
        })
    );
}

然后在任何地方订阅（并在销毁时取消订阅）

ngOnInit() {
  this.getLoc().subscribe(result => this.loc = result);
}

如何从不是路由器插座的组件中获取 angular 10+ 中的 URL 参数？

如何解决如何从不是路由器插座的组件中获取 angular 10+ 中的 URL 参数？

解决方法

相关推荐