1

我想在定义重定向到正确语言而不是静态语言的路由之前设置一个名为 bootLang 的变量。我创建了一个服务，它计算并返回本地存储中的语言（如果已设置）或浏览器语言。为此，我需要来自 ngx-translate 模块的 TranslateService。

计算语言bootstrap.service.ts

import {Injectable} from '@angular/core';
import {TranslateService} from "@ngx-translate/core";

@Injectable()
export class ComputeLangBootstrapService {

  lang_computed: string|null;

  constructor(private translate: TranslateService){}

  getLang(): string {
    this.lang_computed = localStorage.getItem('lang-selected');
    if(!this.lang_computed){
      let browserLang = this.translate.getBrowserLang();
      this.lang_computed = browserLang.match(/en|es|it/) ? browserLang : 'en'
    }
    return this.lang_computed;
  }

}

我需要在定义路由之前实例化此服务，以便计算我必须在重定向路由定义中放置的语言。

应用程序路由.module.ts

import { FooHomeComponent } from "./shore-home/shore-home.component";
import { FooDetailsComponent } from "./tour-details/tour-details.component";
import { ComputeLangBootstrapService } from "./services/compute-lang-bootstrap.service";



let injector = ReflectiveInjector.resolveAndCreate([ComputeLangBootstrapService]);
let bootLang = injector.get(ComputeLangBootstrapService).getLang();

const appRoutes: Routes = [
  { path: ':lang/tour-details/:id', component: FooDetailsComponent },
  { path: ':lang', component: FooHomeComponent },
  { path: '', redirectTo: bootLang, pathMatch: 'full' }
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes),
    CommonModule
  ],
  exports: [
    RouterModule
  ],
  declarations: []
})

export class AppRoutingModule {}

为此，我尝试使用我在 AppModule 中指定的工厂。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule, Http } from '@angular/http';
import { TranslateModule, TranslateLoader, TranslateService} from '@ngx-translate/core';
import { TranslateHttpLoader } from "@ngx-translate/http-loader";

import { AppComponent } from './app.component';
import { FooHomeComponent } from './shore-home/shore-home.component';
import { AppRoutingModule } from "./app-routing.module";
import { FooDetailsComponent } from './tour-details/tour-details.component';
import { ComputeLangBootstrapService } from "./services/compute-lang-bootstrap.service";

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

export function CLBFactory(translate: TranslateService) {
  return new ComputeLangBootstrapService(translate);
}

@NgModule({
  declarations: [
    AppComponent,
    FooHomeComponent,     
    FooDetailsComponent
  ],
  imports: [
    AppRoutingModule,
    HttpModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [Http]
      }
    })
  ],
  providers: [
    {
      provide: ComputeLangBootstrapService,
      useFactory: CLBFactory,
      deps: [TranslateService]
    }
  ],
  bootstrap: [AppComponent]
})

export class AppModule {}

这样我得到了这个错误。

Uncaught Error: No provider for TranslateService! (ComputeLangBootstrapService -> TranslateService)

实际上 TranslateService 可以像服务一样使用，但它没有用 @injectable() 装饰器声明。我尝试了许多其他解决方法来达到我的目标，例如在 ComputeLangBootstrapService 中使用注入器在构造函数之外实例化 TranslateService 或创建 Guard，但它没有在重定向路由中被检查，因为重定向发生在检查 Guard 之前。有人知道实现我的目标的最佳做法是什么？

4

0 回答 0