angular - 如何在 Angular 2 中重新触发所有组件树上的所有纯管道

Question

我有纯 pipe TranslatePipe使用 LocaleService 翻译短语有 locale$: Observable<string>当前语言环境。我还有ChangeDetectionStrategy.OnPush为我的所有组件启用，包括 AppComponent .现在，当有人更改语言时，我如何重新加载整个应用程序？ (在 locale$ observable 中发出新值)。

目前，我正在使用 location.reload()用户在语言之间切换后。这很烦人，因为整个页面都被重新加载了。如何使用 pure 管道和 OnPush 检测策略执行这种 Angular 方式？

Answer 1

纯管道仅在输入值更改时触发。

您可以添加一个您修改的人工附加参数值

@Pipe({name: 'translate'})
export class TranslatePipe {
  transform(value:any, trigger:number) {
    ...
  }
}

然后像这样使用它

<div>{{label | translate:dummyCounter}}</div>

每当 dummyCounter 更新时，都会执行管道。

您还可以将语言环境作为附加参数而不是计数器传递。我不认为对单个管道参数使用 |async 会起作用，因此这可能有点麻烦(需要分配给一个字段才能用作管道参数)