Angular 2-如何从组件插入带有翻译管道的html元素

Question

在.html文件中，我有：

<div id="container">
</div>

我想在其中添加一个button，并加上一些应翻译的文本。

我可以这样：

var container = document.getElementById('container');
var button = document.createElement('button');
button.innerText = this.translate.instant('SOME_TEXT');
container.appendChild(button);

这里的问题是该SOME_TEXT仅被翻译一次。如果在显示此按钮时语言会更改-文本不会更改。

我想做类似的事情：

button.innerHTML = `{{'DONE' | translate}}`;

，其中translate在translate: TranslateService,中是constructor，我做import { TranslateService } from '@ngx-translate/core';

有可能吗？

Answer 1

您可以

export class CashMovementListComponent {
  constructor(private translate: TranslateService) { 
     ... 
     button.innerHTML = this.translate.instant('LABEL.AMOUNT_TOPAY');
  }
}