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

Обновлено

Я работаю над приложением 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-адреса передавался из строки запроса).

записанный вывод


angular6 angular2-routing angular5
person Vicky    schedule 13.06.2018    source источник
comment
Вы можете также включить свою конфигурацию маршрутизации?   -  person Nitishkumar Singh    schedule 13.06.2018
comment
У меня нет конфигурации маршрутизации. У меня мало методов или маршрутов. У меня есть один маршрут, и я хочу получить данные из строки URL-адреса.   -  person Vicky    schedule 13.06.2018

Ответы (2)


arrow_upward
1
arrow_downward

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']));
}

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

person Nitishkumar Singh    schedule 13.06.2018
comment
Я не собираюсь использовать маршрутизацию. Я хочу, чтобы было просто получить один параметр из строки запроса URL. - person Vicky; 13.06.2018
comment
Спасибо, но я получаю эту ошибку. Аргумент типа '(params: ParamMap) => void' не может быть назначен параметру типа '(value: ParamMap, index: number) => ObservableInput‹{}›'. Тип «void» не может быть назначен типу «ObservableInput‹{}›». - person Vicky; 13.06.2018
comment
какой код вы пробовали, тот, что указан в вопросе, или тот, что в ответе? - person Nitishkumar Singh; 13.06.2018
comment
Упоминается в ответе - person Vicky; 13.06.2018

arrow_upward
0
arrow_downward

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

}


}
person Vicky    schedule 14.06.2018