时间戳

首页 > 解决方案 > 网址参数读取两次，因此语言服务无法选择

angular5 - 网址参数读取两次，因此语言服务无法选择

问题描述

更新

我正在开发 angular5 应用程序，我需要从 URL 查询字符串中获取一些数据。

我能够获取数据，但不知何故我得到了未定义的值，该值稍后会转换为我的预期值。我想使用查询字符串中的这些数据来决定要使用什么语言。

如果我硬编码，翻译服务工作正常。如果我硬编码 translate.use('en'); 中的值，代码工作正常；我想通过读取查询字符串来分配这个值

所以基本上我想要 translate.use(this.id) （来自 url 的 this.id 从查询字符串传递）。

应用程序组件

   import {Component} from '@angular/core';
import {TranslateService} from '@ngx-translate/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <h2>{{ 'HOME.TITLE' | translate }}</h2>
      <label>
        {{ 'HOME.SELECT' | translate }}

      </label>
    </div>

  `,
})
export class AppComponent {
  id: string;
  constructor(public translate: TranslateService,private route: ActivatedRoute) {
    translate.addLangs(['en', 'fr']);
    translate.setDefaultLang('en');

    //const browserLang = translate.getBrowserLang();
    //translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
    const browserLang = translate.getBrowserLang();
    translate.use('en');
  }
  ngOnInit() {
    this.route.queryParams.subscribe(params => {
      console.log(params);
      this.id = params['id'];
    })
}
}

调用方式- http://localhost:4200/?id=en或http://localhost:4200/?id=fr

应用程序模块

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {HttpClient, HttpClientModule} from '@angular/common/http';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import { RouterModule, Routes } from '@angular/router'

// AoT requires an exported function for factories
export function HttpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient);
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,RouterModule.forRoot([]),
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我也有带有 json 翻译的 i18n 文件夹。translate.use('en'); 如果我硬编码我想通过从查询字符串读取来分配这个值的值，代码工作正常

所以基本上我想要 translate.use(this.id)（来自 url 的 this.id 从查询字符串传递）。

记录输出

标签： angular5angular2-routingangular6

解决方案

角不使用？在路由中，它使用; 对于多个参数

可选路由参数不以“？”分隔 和“&”，就像它们在 URL 查询字符串中一样。它们用分号“;”隔开 这是矩阵 URL 表示法——您以前可能没有见过。

在您的情况下，您正在传递一个参数。所以你的路线应该类似于

{path: ':param1' component: AppComponent}

然后，您将能够使用方法中编写的代码访问param1ngOnInit。代码应如下所示

ngOnInit() {
   this.activatedRoute.params.subscribe(params=>console.log(params['param1']));
}

如果您打算使用查询参数，那么您应该使用queryParamsfromActivateRoute和 url 应该是http://localhost:4216/?param1=en并使用下面的代码来访问数据

ngOnInit(){
 this.activatedRoute.queryParams.subscribe(params=>console.log(params['param1']));
}

还包括一个工作示例

推荐阅读