Url 参数读取两次，所以语言服务无法选择

Question

已更新

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

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

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

来分配这个值

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

app.component

   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 or http://localhost:4200/?id=fr

app.module

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 从查询字符串中传递） .

Answer 1

Angular 在路由中不使用 ?，而是在 multiple parameters[=20 中使用 ; =]

The optional route parameters are not separated by "?" and "&" as they would be in the URL query string. They are separated by semicolons ";" This is matrix URL notation—something you may not have seen before.

在您的例子中，您传递的是单个参数。所以你的路线应该类似于

{path: ':param1' component: AppComponent}

然后您就可以使用 ngOnInit 方法中编写的代码访问 param1。代码应该如下图

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

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

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

还包括一个working example

Answer 2

这是一个愚蠢的错误。代码很好，但我正在做的是使用 ng onit 从 purl 字符串和构造函数中获取数据以注入翻译服务，并试图在这两者之间交换数据。因为我无法获得任何 way/getting 错误，我在构造函数中添加并删除了 onit 以获取 url 参数（我知道很傻！）

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

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

      </label>
    </div>

  `,
  providers: [ AppGlobals]
})
export class AppComponent {
  param1: string;

  constructor(public translate: TranslateService,private route: ActivatedRoute,private _global: AppGlobals) {
    console.log('Called Constructor');
    this.route.queryParams.subscribe(params => {
        this.param1 = params['param1'];

        translate.use(this.param1);
    });
   // this.route.queryParams.subscribe(params => {

     // this._global.id = params['id'];
      //console.log('hello'+this._global.id);

    //})

    //translate.addLangs(['en', 'fr']);
    //translate.setDefaultLang('en');

    //const browserLang = translate.getBrowserLang();
    //translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
    //const browserLang = translate.getBrowserLang();
    console.log('hello'+this._global.id);
    translate.use(this._global.id);
  }
  ngOnInit() {

}


}

Url 参数读取两次，所以语言服务无法选择

Url parameter read twice so language service cant pick

angular2-routing

angular5

angular6