Question

我正在尝试创建一个管道，该管道使用订阅在单独的服务（tranlationService）上订阅列表（行为主题）。当前显示的值是填充列表之前的值。

在控制台中进行调试时，一旦列表被填充，但是DOM中的值不会更新，则再次调用订阅。

@Pipe({ name: 'dictionary' })
export class DictionaryPipe implements PipeTransform {

  translatedValue: string = null;

  constructor(private _translationService: TranslationService) {

  }

  translationSubscription: Subscription;


  transform(value: string, defaultValue?: string): any {
    this.translationSubscription = this._translationService.dictionaryItem$
      .subscribe(list => {
        return this.getDictionaryValue(value, defaultValue, list);
      });
    return this.translatedValue;


  }

  getDictionaryValue(key: string, defaultValue: string, list: KeyValuePair[]): any {

    if (list && key) {
      for (var i = 0; i < list.length; i++) {
        if (list[i].key.toLowerCase().trim() == key.replace(' ', '').toLowerCase().trim()) {
          if (list[i].value.length > 0)
            this.translatedValue = list[i].value;
          return;

        }
      }
    }

    if (defaultValue) {
      this.translatedValue = defaultValue;
      return;

    }

    this.translatedValue = ''
    return this.translatedValue;

  }

  ngOnDestroy() {
    if (this.translationSubscription) {
      this.translationSubscription.unsubscribe();
    }
  }
}

Answer 1

您必须将pure参数设置为false：

@Pipe({ name: 'dictionary', pure: false })
export class DictionaryPipe implements PipeTransform {
// ...
}

Angular在每个组件更改检测周期内执行不纯管道。每次击键或移动鼠标时，都会经常调用不纯管道。

请牢记这一点，小心安装不纯净的管道。昂贵的，长期运行的管道可能会破坏用户体验。

带有订阅的角管

1 个答案: