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$，但是初始事件（如果触发了外部事件）现在消失了。在下一个事件中，它将呈现它，但是（如果它不为空）。

在我的情况下，我可以通过为BehaviorSubject使用obs$轻松地帮助自己，这总是以最后看到的值开始新的流。因此，首先*ngIf被触发，内部块订阅，然后立即以相同的值被触发。

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

Answer 3

在异步后放置转换管道： {{'foo'|异步|翻译}}

Angular：我可以在异步管道中使用转换吗？

3 个答案: