Angular - AsyncPipe с оператором наблюдаемой карты

Question

Я пытаюсь реализовать небольшой инструмент перевода с Angular 5. Идея состоит в том, чтобы вызвать метод из шаблона, который будет переводить строку из динамически генерируемого списка переводов.

В приведенном ниже коде, хотя оператор карты вызывается, строка не отображается.

// NOT WORKING

@Component({
  selector: 'app-translate',
  template: '<h1>{{translate("Takeaway") | async}}</h1>'
})
export class TranslateComponent {
  private translateChange = new Subject<any>();
  private translateChange$;

  constructor() {
    this.translateChange$ = this.translateChange.asObservable();

    setTimeout(() => {
      this.translateChange.next({
        'Takeaway': 'To go'
      });
    }, 1000);
  }

  translate(str: string) {
    return this.translateChange$.map((nameList) => {
      return nameList.str || str;
    });
  }
}

---

Интересно, что если я удалю оператор карты и передам строку непосредственно в тему, как показано ниже, то строка будет отображена.

// WORKING

@Component({
  selector: 'app-translate',
  template: '<h1>{{translate("Takeaway") | async}}</h1>'
})
export class TranslateComponent {
  private translateChange = new Subject<any>();
  private translateChange$;

  constructor() {
    this.translateChange$ = this.translateChange.asObservable();

    setTimeout(() => {
      this.translateChange.next('To go');
    }, 1000);
  }

  translate(str: string) {
    return this.translateChange$;
  }
}

---

Я хотел бы знать, почему оператор .map не очень хорошо работает с каналом async и есть ли лучший подход для достижения вышеупомянутого.

Спасибо!

Answer 1

Так что я вижу несколько вещей, которые кажутся немного странными в вашем примере.

Повторное использование существующих библиотек

Я не понимаю, почему вы пытаетесь изобрестиколесо здесь.Существует несколько библиотек перевода, которые уже можно использовать с angular.Я бы посоветовал взглянуть на ngx-translate и посмотреть, удовлетворяет ли он вашим потребностям.

Но на случай, если вы все-таки захотите создать свой собственный, есть некоторые другие вещи.

Субъект

По моим предположениям, это является причиной вашей проблемы.Асинхронная труба нечиста и, следовательно, должна быть переоценена в каждом цикле обнаружения измененийЭто ничего не покажет, прежде чем вы начнете что-то излучать с предметом.И после того, как вы отправили значение, потребуется всего один дополнительный цикл, чтобы снова оставить подписку в подвешенном состоянии.

Попробуйте вместо этого использовать BehaviorSubject.Субъект будет излучать только один раз, когда будет установлено новое значение.BehaviorSubject всегда будет выдавать последнее значение, которое было установлено, и вам необходимо указать начальное значение.Теперь предположим, что в вашем шаблоне есть блок, который скрыт * ngIf.Через 1000 мс (что вы делаете в своем конструкторе) субъект выдаст значение.Если вы покажете деталь в блоке * ngIf после того, как это произошло, она никогда не получит значение.

При использовании BehaviorSubject будет использоваться последнее израсходованное значение, поэтому в этом случае с вами все будет в порядке.

Предоставление функциональности с помощью метода в вашем компоненте

Я думаю, что не очень хорошая идея предоставлять перевод с помощью метода в вашем компоненте.Если вы хотите использовать перевод в любом другом компоненте, вам нужно создать метод перевода.Я бы предпочел пойти на заказную трубу.

ngx-translate делает это примерно так:

{{ 'translationKey' | translate }}

И вы можете использовать его в каждом компоненте.

Я бы, вероятно, создалСлужба перевода, которая отвечает за отслеживание активных переводов (в основном, служба перевода хранит наблюдаемую translations$) и канал, который имеет службу в качестве зависимости и выполняет фактическое отображение из словаря перевода в переведенное значение.Если вы решите пойти по этому пути, убедитесь, что труба помечена как нечистая.

Отличается до тех пор, пока не будет изменено

Я, вероятно, добавлю оператор distsinctUntilChanged() после вашегооператор карты.Вы хотите выдавать значения, только если они изменились.Вы можете изменить объект, содержащий ваши переводы, но некоторые значения останутся прежними.В этом случае вам не нужно снова излучать.