Angular中如何通过点击头部URL链接切换@ngx-translate多语言

解决方案 #

你已经在ts中封装好了switchLang切换语言的方法，只需要给头部的a标签绑定点击事件，同时阻止链接默认跳转行为即可，以下是两种实现方案：

方案1：固定语言写死（适合固定只有2种语言的场景）

直接修改头部的HTML代码如下：

<div class="header">
  <div class="languages-right">
    <a 
      href="javascript:void(0)" 
      (click)="switchLang('en')"
      [class.active]="translate.currentLang === 'en'"
    >EN </a>
    <a 
      href="javascript:void(0)" 
      (click)="switchLang('nl')"
      [class.active]="translate.currentLang === 'nl'"
    > | NL </a>
  </div>
</div>

如果不想用javascript:void(0)，也可以通过事件阻止默认跳转：

<a href="#" (click)="switchLang('en'); $event.preventDefault()" [class.active]="translate.currentLang === 'en'">EN </a>
<a href="#" (click)="switchLang('nl'); $event.preventDefault()" [class.active]="translate.currentLang === 'nl'"> | NL </a>

方案2：动态遍历语言列表（扩展性更好，适合后续可能新增语言的场景）

直接遍历你已经配置好的语言列表生成链接，后续新增语言不需要修改HTML：

<div class="header">
  <div class="languages-right">
    <ng-container *ngFor="let lang of translate.getLangs(); let last = last">
      <a 
        href="javascript:void(0)"
        (click)="switchLang(lang)"
        [class.active]="translate.currentLang === lang"
      >
        {{ last ? '| ' + lang.toUpperCase() : lang.toUpperCase() + ' ' }}
      </a>
    </ng-container>
  </div>
</div>

可选补充：当前语言高亮样式

可以在app.component.css中添加如下样式，让当前选中的语言有明显区分：

.languages-right a {
  text-decoration: none;
  color: #333;
}
.languages-right a.active {
  color: #1976d2;
  font-weight: bold;
}

逻辑说明 #

1. 点击事件绑定你已经封装好的switchLang方法，传入对应语言标识即可完成切换，和下拉框的切换逻辑完全一致
2. 阻止a标签默认跳转行为，避免点击链接刷新页面
3. [class.active]动态绑定是为了给当前生效的语言添加高亮样式，可根据自己的需求调整

内容的提问来源于stack exchange，提问作者elodie