Angular模板中如何传递翻译字符串至函数？求可行方案

问题原因 #

你当前代码失效的核心原因是事件绑定中错误使用了插值语法{{}}。Angular的事件绑定（如(click)）的属性值本身就是表达式上下文，不需要用{{}}包裹，否则会触发语法错误，导致函数无法正确接收参数。

直接修正方案（模板内解决） #

把事件绑定里的插值语法去掉，直接在函数参数中使用translate管道处理键值：

<div class="dataInner" (click)="displaySelected(QCONSULTING.Strategy_consulting_details | translate)">
    <h1>Some title example text</h1>
    <p>
        {{ "Turn your supply chain into a competitive weapon, one that's digital, sustainable and
        more resilient than ever before." | truncate:[115, '...'] }}
    </p>
    <span>
        More ➤
    </span>
</div>

替代方案（组件类预处理） #

如果需要更灵活地复用翻译后的值，或者避免在模板中频繁使用管道，可以在组件类中通过TranslateService提前获取翻译结果：

1. 同步获取（适合初始化时已加载翻译文件） #

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

@Component({
  // 组件元数据
})
export class YourComponent {
  strategyConsultingDetails: string;

  constructor(private translate: TranslateService) {
    this.strategyConsultingDetails = this.translate.instant(QCONSULTING.Strategy_consulting_details);
  }

  displaySelected(content: string) {
    // 你的业务逻辑
  }
}

模板中直接传入预处理后的变量：

<div class="dataInner" (click)="displaySelected(strategyConsultingDetails)">
    <!-- 其他内容 -->
</div>

2. 异步获取（适合动态加载翻译文件场景） #

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { Observable } from 'rxjs';

@Component({
  // 组件元数据
})
export class YourComponent {
  strategyConsultingDetails$: Observable<string>;

  constructor(private translate: TranslateService) {
    this.strategyConsultingDetails$ = this.translate.get(QCONSULTING.Strategy_consulting_details);
  }

  displaySelected(content: string) {
    // 你的业务逻辑
  }
}

模板中配合async管道使用：

<div class="dataInner" (click)="displaySelected(strategyConsultingDetails$ | async)">
    <!-- 其他内容 -->
</div>

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