如何在HTML模板中最好地使用translate管道和async管道?
例如,假设'foo'和'bar'有值:
{{ 'foo' | translate: '{ bar: (bar$ | async) }' }}
编译后看起来是空的。
如何在HTML模板中最好地使用translate管道和async管道?
例如,假设'foo'和'bar'有值:
{{ 'foo' | translate: '{ bar: (bar$ | async) }' }}
您不应该给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)
在异步之后放置翻译管道: {{ 'foo' | async | translate }}
我遇到了类似的问题。在我的情况下,它是由周围的条件语句引起的:
<div *ngIf="(obs$|async)">
{{ 'MSG' | translate:{msg: (obs$|async)} }}
</div>
当obs$
被触发时,*ngIf
将呈现内部块。然后内部块订阅了obs$
,但最初触发外部if的事件现在已经消失了。在下一个事件中,它将呈现它,但是(如果它不为空)。
在我的情况下,我可以通过为obs$
使用BehaviorSubject
来轻松帮助自己,它始终从上次看到的值开始新的流。因此,首先触发*ngIf
,然后内部块订阅,立即以相同的值进行触发。
您可以在https://stackblitz.com/edit/angular-translatepipe上看到简化示例,第一个块是不工作的代码,第二个块是我如何解决问题的方法。但是,这个技巧可能并不适用于所有情况。