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或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

可选路由参数不以“？”分隔和“＆amp;”像他们将在URL查询字符串中。它们用分号分隔“;” 这是矩阵URL表示法 - 您可能以前从未见过的。

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

{path: ':param1' component: AppComponent}

然后，您就可以使用ngOnInit方法编写的代码访问 param1 。代码应如下所示

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

如果您打算使用查询参数，则应使用queryParams中的ActivateRoute，并且网址应为 http://localhost:4216/?param1=en ，并使用以下代码访问数据

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

还包括working example

Answer 2

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

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参数读取两次，因此语言服务无法选择

2 个答案: