Параметр URL прочитан дважды, поэтому языковая служба не может выбрать

Question

Обновлено

Я работаю над приложением angular5, в котором мне нужно получить некоторые данные из строки запроса URL.

Я могу получить данные, но каким-то образомЯ получаю неопределенное значение, которое позже преобразуется в мое ожидаемое значение.Я хочу использовать эти данные из строки запроса, чтобы решить, какой язык будет использоваться.

Служба перевода работает нормально, если я жестко закодировал. Код работает нормально, если я жестко закодировал значение в translate.use ('en');Я хочу присвоить это значение, читая из строки запроса

Так что в основном я хочу translate.use (this.id) (this.id из URL, который будет передан из строки запроса).

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 или 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 { }

У меня также есть папка i18n с переводами json.Код работает нормально, если я жестко закодировал значение в translate.use('en'); Я хочу присвоить это значение, читая из строки запроса

Так что в основном я хочу translate.use (this.id) (this.id из URL, который необходимо передать из строки запроса).

Answer 1

Это была глупая ошибка.Код был в порядке, но я использовал ng onit для получения данных из строки purl и конструктор для внедрения службы перевода и пытался обмениваться данными между этими двумя.конструктор и удаленный 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() {

}


}

Answer 2

Angular не использует ? в маршрутизации, вместо этого он использует ; для несколько параметров

Дополнительные параметры маршрута:не разделены знаком "?"и "&", как они будут в строке запроса URL.Они разделяются точкой с запятой ";"Это матричная нотация URL-адресов, которую вы, возможно, раньше не видели.

В вашем случае вы передаете один параметр.Таким образом, ваш маршрут должен быть похож на

{path: ':param1' component: AppComponent}

Тогда вы сможете получить доступ к param1 , используя код, написанный в методе ngOnInit.Код должен быть таким, как показано ниже

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

Если вы планируете использовать параметры запроса, то вам следует использовать queryParams из ActivateRoute, а URL должен быть http://localhost:4216/?param1=en ииспользуйте код ниже для доступа к данным

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

Также включая рабочий пример