使用Angular + Typescript VS Code中的语言进行路由

Question

我正在使用VS Code开发一个多语言的Angular4应用程序。

路由器必须是这样的：

本地主机/ EN-US /愿景

我有一个名为TranslateHelper的类：

import { ActivatedRoute } from '@angular/router';
export class TranslateHelper {
   private currentLanguage: string;
   private defaultLanguage = 'de-de';

   constructor( private route: ActivatedRoute) {}

   public getCurrentLanguage() {
      this.route.params.subscribe(params => {
        this.currentLanguage = params.lang;
   });

   return this.currentLanguage;
  }
}

app-routing.module是：

const routes: Routes = [
  { path: ':lang/visions', component: VisionsComponent},
];

在页脚中我试图在URL中添加语言：

export class FooterComponent implements OnInit {
  public lang;

  constructor(private translateHelper: TranslateHelper) { }

  ngOnInit() {
    this.lang = this.translateHelper.getCurrentLanguage();
  }

}

HTML：

    <li><a [routerLink]="[lang, 'visions']">Visions</a></li>

我没有收到任何失败，但是页脚中的lang总是未定义的，就像params.lang一样。

任何人都可以告诉我如何解决它？ 还是要谢谢你。

Answer 1

这是因为您的退货不在订阅范围内。 试着把它放进去。

Answer 2

您正试图从订阅中返回一些内容，但实际上并不起作用。 您可以返回路径参数并订阅组件中的参数，或者您可以这样做：

export class TranslateHelper {
   private currentLanguage: string;
   private defaultLanguage = 'de-de';

   private language: Subject<any> = new Subject<any>();

   public language$ = language.asObservable();

   constructor( private route: ActivatedRoute) {}

   public getCurrentLanguage() {
      this.route.params.subscribe(params => {
        this.language.next(params.lang)
      });
   }
}


export class FooterComponent implements OnInit {
  public lang;

  constructor(private translateHelper: TranslateHelper) { }

  ngOnInit() {

    this.translateHelper.language$.subscribe(language => {
      this.lang = language;
    }):
  }

}