如何在指令字段中使用翻译？

Question

我正在构建一个 Angular 应用程序，我想在我的整个应用程序中添加翻译。为此，我使用ngx-translation method。使用参数构建翻译时遇到问题：我的应用显示 [Object object]。 我使用了一个使用 [message] 字段的指令，该值需要翻译，但我不知道如何在我的消息值中添加翻译。

我的组件如下：

<app-confirmation-dialog  
[translate]="'demo.greeting'" 
[translateParams]="{name: 'Andreas'}"
[message]="?????????"
[confirmationLabel]="'quit anyway'"
(onConfirmation)="onCancel()"></app-confirmation-dialog>

我在翻译文件中添加了相同的键：

{
  ....
  "demo": {
    "greeting": "Hello {{name}}!"
  }
  ....
}

你有什么想法在我的消息值中添加翻译吗？

Answer 1

在这种情况下，您将无法轻松使用指令形式的翻译，因为您将 message 作为元素的属性传递（在这种情况下，是指令的输入）。如果您继续使用指令形式[translate]，那么它会以您不希望的方式与您自己的指令混淆。

改为使用管道形式，将参数对象作为参数传递：

<app-confirmation-dialog
  [message]="'demo.greeting' | translate: {name: 'Andreas'}"
  [confirmationLabel]="'quit anyway'"
  (onConfirmation)="onCancel()">
</app-confirmation-dialog>