如何在 typescript 中使用翻译 pipe 代替 Angular 中的模板 6

Question

我有一个要求，我需要在 typescript 逻辑中使用 Angular 的translate pipe 。

我见过这个问题： How to use pipe in ts not HTML

我还检查了这个链接： Translate your Angular App with Pipes

上述问题的答案是有效的，但在这种情况下，pipe 是定制的。 但在我的情况下， translate pipe 是内置的。 它改变文本的语言。 我的模板是这样的：

<my-component
  [myLabel1]="label1 | translate"
  [myLabel2]="label2 | translate"
  [myLabel3]="label3 | translate"
  [myLabel4]="label4 | translate"
  [myLabel5]="label5 | translate"
  [myLabel6]="label6 | translate">
</my-component>

为了避免这么多指令，我想创建一个接口并将所有指令作为一个 object 提供，例如：

<my-component
  [toChildAsInput]="labelObject">
</my-component>

我创建了一个接口： labelconfig.ts

export interface LabelConfig {
    label1: string;
    label2: string;
    label3: string;
    label4: string;
    label5: string;
    label6: string;
}

我的 typescript 是：

import { LabelConfig } from './labelconfig';
labelObject:LabelConfig ;
ngOnInit() {
  labelObject.label1="Hello";  // how to apply pipe here
  ...
}

我只被困在这里。 如何在 typescript 中应用相同的 pipe。 请帮我。 有没有可能。

Answer 1

如果您在模块级别提供了 pipe，则只需在提供程序中注入或在组件级别providers它

providers: [ TranslatePipe ]

constructor(private translate: TranslatePipe) {}

并对组件中的注入实例进行简单的调用transfom

this.data = this.translate.transform(value)