角度:我可以将翻译与异步管道一起使用吗?

Question

在HTML 模板中使用带有异步管道的翻译管道的最佳方法是什么？

例如，假设"foo"和"bar"具有值：

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

编译后显示为空。

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)

Answer 2

我也有类似的问题。就我而言，这是由周围的条件引起的：

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

当obs$被触发时，*ngIf渲染内部块。然后内部块订阅了obs$now，但初始事件(触发外部 if)现在消失了。但是，在下一个事件中，它将呈现它(如果它不为空)。

就我而言，我可以轻松地通过使用BehaviorSubject来帮助自己obs$，它总是以上次看到的值开始一个新流。因此，首先，*ngIf被触发，内部块订阅，然后立即以相同的值触发。

你可以在 https://stackblitz.com/edit/angular-translatepipe 的简化示例中看到它，第一个块是非工作代码，第二个块是我如何解决它。但是，该技巧可能不适用于所有情况。

Answer 3

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