Angular：我可以在异步管道中使用翻译吗？

Question

如何在HTML模板中最好地使用translate管道和async管道？

例如，假设'foo'和'bar'有值：

{{ 'foo' | translate: '{ bar: (bar$ | async) }' }}

编译后看起来是空的。

- ginna

---

这应该可以正常工作。你是说移除其中一个会使另一个起作用吗？ - Ingo Bürk

Answer 1

您不应该给translate对象添加引号。

<!-- Works! -->
{{ 'foo' | translate: { bar: (bar$ | async) } }}




<!-- Doesn't work -->
{{ 'foo' | translate: '{ bar: (bar$ | async) }' }}

ERROR SyntaxError: Wrong parameter in TranslatePipe. Expected a valid Object, received: { bar: (bar$ | async) } 
at TranslatePipe.push../node_modules/@ngx-translate/core/fesm5/ngx-translate-core.js.TranslatePipe.transform (ngx-translate-core.js:1178)

- George Chondrompilas

Answer 2

在异步之后放置翻译管道： {{ 'foo' | async | translate }}

- Morris Bahrami

Answer 3

我遇到了类似的问题。在我的情况下，它是由周围的条件语句引起的：

<div *ngIf="(obs$|async)">
  {{ 'MSG' | translate:{msg: (obs$|async)} }}
</div>

当obs$被触发时，*ngIf将呈现内部块。然后内部块订阅了obs$，但最初触发外部if的事件现在已经消失了。在下一个事件中，它将呈现它，但是（如果它不为空）。

在我的情况下，我可以通过为obs$使用BehaviorSubject来轻松帮助自己，它始终从上次看到的值开始新的流。因此，首先触发*ngIf，然后内部块订阅，立即以相同的值进行触发。

您可以在https://stackblitz.com/edit/angular-translatepipe上看到简化示例，第一个块是不工作的代码，第二个块是我如何解决问题的方法。但是，这个技巧可能并不适用于所有情况。

- hoeni