Angular路由：创建不同语言路径路由到同一个组件形成的导航栏组件

Question

我正在使用 ngx-translate 来翻译我的组件。如果用户在同一组件内单击语言 link ，我可以更改网站语言。
在angular路由模块

const routes: Routes = [
  {path: '',  redirectTo: "fr/home", pathMatch: "full"},
  {path: ':languageCode/home', component: HomeComponent},
  {path: ':languageCode/employees', component: EmployeesComponent},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

在每个组件中，我都有一个 link 可以为同一组件更改为其他语言。
例如这是我的 home 组件模板 html

<h1>{{'home page' | translate}}</h1>

<p *ngIf="lang === 'fr'">
    <button class="custom-button" (click)="navigate('en')">English</button>
</p>

<p *ngIf="lang === 'en'">
     <button class="custom-button" (click)="navigate('fr')">French</button>
</p>

主页组件 ts

export class HomeComponent implements OnInit {

 
  lang;
  constructor(private translateService: TranslateService, private router: Router, private route: ActivatedRoute) {
    this.lang = this.route.snapshot.paramMap.get('languageCode');
    console.log(this.lang);
    this.translateService.setDefaultLang('fr');
    this.translateService.use(this.lang);
  }
  ngOnInit(): void {
    this.route.params.subscribe(params => {
      this.lang = params['languageCode'];

      console.log(this.lang)
      this.translateService.use(this.lang);
    
  });
  }

  navigate(languageCode: string) {
    this.router.navigate([languageCode, "home"]);
  }
}

我必须为每个组件做这个（这不好），所以我想把这些语言 link 放在 导航栏组件

<p *ngIf="lang === 'fr'">
    <button class="custom-button" (click)="navigate('en')">English</button>
</p>

<p *ngIf="lang === 'en'">
     <button class="custom-button" (click)="navigate('fr')">French</button>
</p>

但问题是：
1-我无法获得激活的路线以获取导航栏组件内的语言代码。
2-我怎么知道我应该将用户导航到的组件名称。

app.component.html

<app-navbar></app-navbar>
<router-outlet></router-outlet>

Answer 1

你会不会把事情弄糊涂了？使用 ngx-translate 的全部目的是您使用（并因此路由）到同一组件，而不管用户选择的语言。

How to use ngx-translate

所以你的路线应该是这样的：

const routes: Routes = [


{path: '',  redirectTo: "home", pathMatch: "full"},
  {path: ':home', component: HomeComponent},
  {path: ':employees', component: EmployeesComponent},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

没有任何对语言代码的引用。

您可以使用这样的语言服务

import { Injectable } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { CookieService } from 'ngx-cookie-service';

@Injectable({ providedIn: 'root' })
export class LanguageService {
  public languages: string[] = ['de', 'en', 'fr', 'nl'];

  constructor(public translate: TranslateService, private cookieService: CookieService) {
    let browserLang;
    this.translate.addLangs(this.languages);
    if (this.cookieService.check('lang')) {
      browserLang = this.cookieService.get('lang');
    }
    else {
      browserLang = translate.getBrowserLang();
    }
        translate.use(browserLang.match(/de|en|fr|nl/) ? browserLang : 'nl');
  }

  public setLanguage(lang) {
      this.translate.use(lang);
  }
}

在你的顶部栏，你可以有这样的东西：

<div class="dropdown d-inline-block" ngbDropdown>
            <button type="button" class="btn header-item" id="page-header-user-dropdown" ngbDropdownToggle>
                <img *ngIf="flagvalue !== undefined" src="{{flagvalue}}" alt="Header Language" height="16"> <span class="ml-1">{{countryName}}</span>
                <img *ngIf="flagvalue === undefined" src="{{valueset}}" alt="Header Language" height="16">
                <span *ngIf="flagvalue === undefined" class="ml-1">English</span>
            </button>
            <div class="dropdown-menu dropdown-menu-right" ngbDropdownMenu>
                <a href="javascript:void(0);" class="dropdown-item notify-item" *ngFor="let item of listLang"
                   (click)="setLanguage(item.text, item.lang, item.flag)" [ngClass]="{'active': currentlanguage === item.lang}">
                    <img src="{{item.flag}}" alt="user-image" class="mr-1" height="12"> <span class="align-middle">{{item.text}}</span>
                </a>
            </div>
        </div>

setLanguage(text: string, lang: string, flag: string) {
        this.countryName = text;
        this.flagvalue = flag;
        this.currentlanguage = lang;}

剩下的，看如何使用ngx-translate。

万一您的答复是，那不是我所问问题的答案。嗯，那是因为你问的不适合你想使用的库 ngx-translate，或者 SPA 中的路由概念。

希望这能让您转向不同的方向。

感谢您清楚地记录您的问题。

如果您继续挣扎，请告知。

身体健康，保重，祝你好运。

Angular路由：创建不同语言路径路由到同一个组件形成的导航栏组件

Angular Routing: create different language path route to the same component form navbar component

angular

angular-routing

multilingual

angular-router