Angular : 根据可观察值重绘管道

Question

我有一堆处理本地化的自定义管道 :

例如，这里是一个简单的管道，将根据语言显示全名/姓氏或姓氏/全名：

@Pipe({ name: 'fullname' })
export class FullnamePipe implements PipeTransform, OnDestroy {
  private language = Language.EN_US;
  private subscriptions = new SubSink();

  constructor(private translateService: TranslateService) {
    this.language = LanguageUtils.toAppLanguage(this.translateService.currentLang);
    this.subscriptions.add(
      this.translateService.onLangChange.subscribe(({ lang }) => {
        this.language = LanguageUtils.toAppLanguage(lang);
      })
    );
  }

  transform(value: string, language?: Language): string {
    const [firstname, lastname] = value.split('|');
    const firstNameFirst = LanguageUtils.isFirstNameFirst(language || this.language);
    return firstNameFirst ? `${firstname} ${lastname}` : `${lastname} ${firstname}`;
  }

  ngOnDestroy() {
    this.subscriptions.unsubscribe();
  }
}

现在这是一堆具有完全相同功能的管道之一，只是转换方法发生了变化。

我希望这些管道能够根据 this.language 更改自行重绘（因此更改它们的显示值）。

现在，我知道至少有 2 个解决方案：

使用 pure:false 它会起作用，因为更改语言会触发检测。但这样做的缺点是每次检测触发时管道都会运行，而不仅仅是语言。所以太过分了。
添加一个参数（如上）但这意味着每个使用管道的组件都需要实际将一个带有语言值的可观察对象传递给管道。这使得每个组件都比应有的“更智能”。

是否有一种解决方案可以让我根据需要手动重绘管道？

Answer 1

将管道设置为 { pure: false } 绝对不是性能问题，除非您在一个组件中有数千个管道。

第二个提议不仅使组件更智能，而且还涉及 async 管道，它也是不纯的并且比第一个解决方案具有更高的性能命中 - 不是，再次，这将是一个问题，除非您在模板中做错了。

如果在 ChangeDetectionStrategy.OnPush 上下文中语言发生变化时需要重绘，我假设你有，因为它比简单的不纯管道具有更高的性能影响，请不要忘记调用 ChangeDetectorRef.markForCheck 在语言订阅内。

Angular : 根据可观察值重绘管道

Angular : Redraw Pipe based on observable value

angular-pipe

angular