Question

我在角度2中创建TranslationPipe，它将字符串作为输入并从TranslationService获取转换并将其返回到视图。像这样举例如：

<div>{{ 'hello world' | translate }}</div>
变为：
hej verden

我想要一种方法来更改视图的语言，并更新页面上的所有文本而无需重新加载整个页面。有没有办法触发重新加载页面上的所有TranslationPipe，甚至应用程序中的所有管道？

通常，以角度触发管道的唯一方法是通过传递给它的变量的变化。虽然输入是一个字符串，但我需要手动触发。

存储所有翻译文本的文本对象存储在服务中，因此我知道另一种解决方案是执行此操作 <div> translationObject['hello world'] </div> 但这对设计师来说可读性较差。

Answer 1

使用pure: false，每次Angular运行更改检测时，都会评估管道。

@Pipe({
  name: 'xxx',
  pure: false
})

认为这相当昂贵。

另一种方法是将语言作为附加参数传递，然后当语言发生变化时，Angular也会评估管道。

Answer 2

管道可以有参数，即使你不需要它们（或者不是全部），它们的变化触发器管道transform也会起作用。

// html
<p class="time-stamp">{{message.sent | timeAgo:trigger}}</p>

// component
trigger: number = 0;

ngOnInit() {
  setInterval(() => this.trigger = Math.random(), 60 * 1000)
}

触发管道重新加载而不改变输入

2 个答案: