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

问题描述

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

我尝试了以下操作，但得到的却是获取密钥的文本

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

this.route.params.pipe(
  concatMap((param) => {
    const ein = param['nonprofit-id'];
    return this.nonprofitService.getNonprofit(ein).pipe(
      map(nonprofit => [ein,nonprofit]),);
  ),concatMap(([ein,nonprofit]) => {
    const ratingID = ...;
    this.nonprofitService.getratingForNonprofit(ein,ratingID).pipe(
      map(nonprofitrating => [nonprofitrating,ein,);
  }),concatMap(([nonprofitrating,nonprofit]) => {
    const causeID = ...;
    return this.nonprofitService.getSimilarNonprofits(causeID).pipe(
      map(similar => [similar,nonprofitrating,);
  }
).subscribe(([similar,nonprofit]) => { ... });

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

concatMap

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

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

constructor(public translate: TranslateService,) {

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

解决方法

您将始终无法将 click() 直接应用于 <a> 标签。试试这个方法：

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

并且您确实会使用点击功能而不是锚点的 href 事件。

您的组件

public title: string;

constructor(private translate: TranslateService,) { 
}

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