使用 ngx-translate 更改 Angular 基本 href

Question

我已經成功實現了 ngx-translate。 現在，我想更改我的 Angular 項目的基本 href，具體取決於我從 header 菜單中選擇的語言。

目前，我的 URL 看起來像這樣：“localhost:4200”。 然后，當您啟動項目時，它必須顯示如下內容：“localhost:4200/en”或如下所示：“localhost:4200/es”，具體取決於所選語言。

我的索引 html 有這個：

<base href="/"/>

我的 header 組件 ts 文件有一個 function 使用 ngx-translate 更改語言。 如您所見，我嘗試使用“replaceState”在 URL 中顯示選擇的語言，並且它有效，但是一旦我導航到另一條路線，它就會消失。

import { Component, OnInit } from '@angular/core';
//For translate language
import { TranslateService } from '@ngx-translate/core'; 
import { Router, Event, NavigationStart, NavigationEnd } from '@angular/router';
import { Location } from '@angular/common';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
})
export class HeaderComponent implements OnInit {


  constructor(private translate: TranslateService,
              private router: Router,
              private location: Location,
              ) 
    { translate.addLangs(['es','en']);
      translate.setDefaultLang('es'); 
    }

  ngOnInit(): void {



  }


  useLanguage(language: string): void {
    this.translate.use(language); 
    // alert(language);

    // location.replace("https://www.google.com");
    // return;


    const modified_path = language;
    this.location.replaceState(modified_path);

  } 
 

}

Answer 1

看起來您正在嘗試使用基本 href 實現某種路由。 只有當我需要我的應用程序的多個實例時，我才會使用基本 href。 例如，它們中的每一個都在一個子文件夾中。

如果您只想要一個處理不同語言的應用程序實例，也許您應該嘗試 Angular 路由器 ( https://angular.io/guide/router-reference )。 這個想法是在根級別有一個代表語言的路由和一個確保只調用有效語言的語言保護。 這看起來像這樣：

const routes2: Routes = [
    {
        path: ':language',
        canActivate: [LanguageGuard],
        children: [
            {
                path: 'home',
                component: HomeComponent,
            },
            {
                path: 'some-page',
                component: SomePageComponent,
            },
        ]
    },
    {
        path: '**',
        redirectTo: '/en',
    },
];