Angular 如何使用 translate i18n 键作为 html 中的函数参数

Question

我正在尝试将 i18n 翻译服务密钥作为参数函数传递给 html 组件。

我尝试了以下方法，但得到的却是文本，它得到了密钥

我在 component.ts 中分配了一个带有标题的变量

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

constructor(public translate: TranslateService,) {

}
public title= this.translate.instant('title-key');

在component.html中。我有这个变量作为参数函数

<a class="nav-link" (click)="functionName(title)" > {{'title-key' | translate}}</a>

应该发送的标题是tasks 而是发送密钥 -> title-key

functionName(tabSelected) {
  switch(tabSelected) {
      case this.title:
        this.tab = true;
      break;
      default:
   }
}

    <kendo-tabstrip #tabstrip [keepTabContent]="true">
        <kendo-tabstrip-tab [title] = "title" *ngIf="tab" [selected]="true">
            <ng-template kendoTabContent *loadOnDemand>
              <app-component></app-component>
            </ng-template>
        </kendo-tabstrip-tab>
   <kendo-tabstrip>

Answer 1

将click() 直接应用于<a> 标记总是会遇到问题。试试这个方法：

<a href="javascript: void(0)">
    <i class="nav-link" (click)="function(getTitle())">{{'title-key' | translate}}</i>
</a>

您确实会使用点击功能，而不是锚点的 href-event。

您的组件

public title: string;

constructor(private translate: TranslateService,) { 
}

getTitle(): string {
   return this.translate.instant('title-key');
}