如何通过ng2-translate管道向Angular组件@Input()注入翻译字符串

我来帮你搞定这个问题！你当前的写法存在一个小误区，咱们一步步修正并实现需求：

首先修正父组件的绑定写法 #

你在父组件里的属性绑定用了多余的插值语法{{}}，这是错误的——属性绑定[]内部直接放表达式即可。正确的写法应该是：

<title-component [title]="'KEY' | translate"></title-component>

为什么这样能行？ #

translate管道会直接将键KEY转换为当前语言环境下的翻译字符串，这个转换后的结果会直接作为@Input()的值传递给子组件。子组件完全不需要介入翻译逻辑，完美契合你不想在子组件注入TranslateService的需求。

子组件的实现示例 #

子组件只需要简单接收传入的已翻译字符串并渲染：

子组件 TS 文件

import { Component, Input } from '@angular/core';

@Component({
  selector: 'title-component',
  templateUrl: './title.component.html'
})
export class TitleComponent {
  @Input() title!: string; // 接收父组件传来的已翻译文本
}

子组件模板文件

<div class="title">{{ title }}</div>

额外的动态更新特性 #

如果之后你切换应用的语言，translate管道会自动响应语言变化并更新翻译结果，子组件的title内容也会随之自动刷新，完全不需要额外编写更新逻辑。

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