Чистые каналы срабатывают только при изменении входного значения.

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

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

а затем используйте его как

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

Всякий раз, когда dummyCounter обновляется, канал выполняется.

Вы также можете передать локаль в качестве дополнительного параметра вместо счетчика. Я не думаю, что использование |async для одного параметра канала будет работать, поэтому это может быть немного громоздким (должно быть назначено полю, чтобы его можно было использовать в качестве параметра канала)

ЛУЧШЕЕ ПРОИЗВОДИТЕЛЬНОЕ РЕШЕНИЕ:

Я нашел решение для этого. Ненавижу называть это решением, но оно работает.

У меня была такая же проблема с каналом и orderBy. Я попробовал все решения здесь, но влияние на производительность было ужасным.

Я просто добавил дополнительный аргумент в свой канал

let i of someArray | groupBy:'someField':updated" 
<!--updated is updated after performing some function-->

то каждый раз, когда я выполняю обновление массива, я просто

updateArray(){
    //this can be a service call or add, update or delete item in the array
      .then.....put this is in the callback:

    this.updated = new Date(); //this will update the pipe forcing it to re-render.
}

Это заставляет мой канал orderBy снова выполнить преобразование. И производительность намного лучше.

Благодаря ответу Гюнтеру Цохбауэру (см. комментарии), у меня все заработало.

Насколько я понимаю, детектор изменений Angular работает так:

cd.detectChanges(); // Detects changes but doesn't update view.
cd.markForCheck();  // Marks view for check but doesn't detect changes.

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

1. Изменения шаблона

Чтобы перезагрузить все приложение, нам нужно скрыть и показать все дерево компонентов, поэтому нам нужно обернуть все в app.component.html в ng-container:

<ng-container *ngIf="!reloading">
  <header></header>
  <main>
    <router-outlet></router-outlet>
  </main>
  <footer></footer>
</ng-container>

ng-container лучше, чем div, потому что он не отображает никаких элементов.

Для поддержки асинхронности мы можем сделать что-то вроде этого:

<ng-container *ngIf="!(reloading$ | async)"> ... </ng-container>

reloading: boolean и reloading$: Observable<boolean> здесь указывают, что компонент в данный момент перезагружается.

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

2. Пример синхронизации

export class AppComponent implements OnInit {
    reloading: boolean;

    constructor(
        private cd: ChangeDetectorRef,
        private locale: LocaleService) {

        this.reloading = false;
    }

    ngOnInit() {
        this.locale.language$.subscribe(_ => {
            this.reloading = true;
            this.cd.detectChanges();
            this.reloading = false;
            this.cd.detectChanges();
            this.cd.markForCheck();
        });
    }
}

3. Пример Айнк

export class AppComponent implements OnInit {
    reloading: BehaviorSubject<boolean>;

    get reloading$(): Observable<boolean> {
        return this.reloading.asObservable();
    }

    constructor(
        private cd: ChangeDetectorRef, // We still have to use it.
        private locale: LocaleService) {

        this.reloading = new BehaviorSubject<boolean>(false);
    }

    ngOnInit() {
        this.locale.language$.subscribe(_ => {
            this.reloading.next(true);
            this.cd.detectChanges();
            this.reloading.next(false);
            this.cd.detectChanges();
        });
    }
}

Нам не нужно cd.markForChanges() сейчас, но мы все равно должны сказать детектору обнаружить изменения.

4. Маршрутизатор

Маршрутизатор не работает должным образом. При перезагрузке приложения таким образом router-outlet содержимое станет пустым. Я еще не решил эту проблему, и переход по тому же маршруту может быть болезненным, потому что это означает, что любые изменения, сделанные пользователем, например, в формах, будут изменены и потеряны.

5. При инициализации

Вы должны использовать хук OnInit. Если вы попытаетесь вызвать cd.detectChanges() внутри конструктора, вы получите ошибку, потому что angular еще не соберет компонент, но вы попытаетесь обнаружить в нем изменения.

Теперь вы можете подумать, что я подписываюсь на другую службу в конструкторе, и моя подписка сработает только после полной инициализации компонента. Но дело в том, что вы не знаете, как работает сервис! Если, например, он просто выдает значение Observable.of('en') - вы получите ошибку, потому что как только вы подпишитесь - первый элемент выдается сразу, пока компонент еще не инициализирован.

У моего LocaleService та же проблема: субъект, стоящий за наблюдаемым, — BehaviorSubject. BehaviorSubject — это тема rxjs, которая выдает значение по умолчанию сразу после подписки. Итак, как только вы напишете this.locale.language$.subscribe(...) - подписка сразу сработает хотя бы один раз, и только потом вы будете ждать смены языка.

Просто установите для свойства pure значение false

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

Вы также можете создать свой собственный канал unpure для отслеживания внешних изменений. Проверьте источники нативного Async Pipe получить основную мысль.

Все, что вам нужно, это вызывать ChangeDetectorRef.markForCheck(); внутри вашего нечистого канала каждый раз, когда ваш Observable возвращает новый строка локали. Мое решение:

@Pipe({
  name: 'translate',
  pure: false
})
export class TranslatePipe implements OnDestroy, PipeTransform {

  private subscription: Subscription;
  private lastInput: string;
  private lastOutput: string;

  constructor(private readonly globalizationService: GlobalizationService,
              private readonly changeDetectorRef: ChangeDetectorRef) {
    this.subscription = this.globalizationService.currentLocale // <- Observable of your current locale
      .subscribe(() => {
        this.lastOutput = this.globalizationService.translateSync(this.lastInput); // sync translate function, will return string
        this.changeDetectorRef.markForCheck();
      });
  }

  ngOnDestroy(): void {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
    this.subscription = void 0;
    this.lastInput = void 0;
    this.lastOutput = void 0;
  }

  transform(id: string): string { // this function will be called VERY VERY often for unpure pipe. Be careful.
    if (this.lastInput !== id) {
      this.lastOutput = this.globalizationService.translateSync(id);
    }
    this.lastInput = id;
    return this.lastOutput;
  }
}

Или вы даже можете инкапсулировать AsyncPipe внутри вашего канала (не очень хорошее решение, например):

@Pipe({
  name: 'translate',
  pure: false
})
export class TranslatePipe implements OnDestroy, PipeTransform {

  private asyncPipe: AsyncPipe;
  private observable: Observable<string>;
  private lastValue: string;

  constructor(private readonly globalizationService: GlobalizationService,
              private readonly changeDetectorRef: ChangeDetectorRef) {
    this.asyncPipe = new AsyncPipe(changeDetectorRef);
  }

  ngOnDestroy(): void {
    this.asyncPipe.ngOnDestroy();
    this.lastValue = void 0;
    if (this.observable) {
      this.observable.unsubscribe();
    }
    this.observable = void 0;
    this.asyncPipe = void 0;
  }

  transform(id: string): string {
    if (this.lastValue !== id || !this.observable) {
      this.observable = this.globalizationService.translateObservable(id); // this function returns Observable
    }
    this.lastValue = id;

    return this.asyncPipe.transform(this.observable);
  }

}

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

Чтобы исправить это, создайте новый массив (с новыми изменениями) и назначьте его вашему массиву, который вы хотите использовать в канале. На этот раз Angular обнаруживает, что ссылка на массив изменилась. Он выполняет канал и обновляет отображение новым массивом с новыми изменениями.

введите здесь описание ссылки