Давайте представим приложение, в котором

• все компоненты (включая приложение.компонент) являются onPush .

как я могу вызвать функцию forceAppWideChangeDetection() , например app.component , которая обеспечит обнаружение изменений в КАЖДОМ компоненте приложения.

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

Как это можно сделать?

Пожалуйста, обратите внимание

• мое приложение все еще находится в ViewEngine. На случай, если это может иметь ко мне отношение.
• причина, по которой я спрашиваю об этом, заключается в следующем: когда язык в пользовательском интерфейсе меняется с lang-a на lang-b. Почти каждый компонент нуждается в определении изменений для обновления отображаемых текстов-языка. В настоящее время у нас есть собственный @Input() для этого, который проходит через все дерево компонентов и заставляет компоненты повторно отображаться как «свойство ввода изменилось». Лично мне такой подход не нравится, и я искал более простое решение. Так что, как вы можете видеть, этот дорогостоящий метод forceAppWideChangeDetection() должен выполняться только при изменении языка.

Если нет готового решения, о котором я не знаю, вы можете использовать службу и базовый класс:

 @Injectable({ providedIn: 'root' })
export class ChangeDetectionTriggerService {
  readonly trigger$ = new Subject<void>();
}
 

Затем базовые компоненты:

 @Directive()
export class BaseComponent implements OnDestroy {

  readonly onDestroy$ = new Subject<void>();

  ngOnDestroy(): void {
    this.onDestroy$.next();
  }

}
 

 @Directive() // https://angular.io/guide/migration-undecorated-classes
export class BaseChangeDetectionComponent implements OnInit extends BaseComponent {

  constructor(private changeDetectorRef: ChangeDetectorRef,
              private changeDetectionTriggerService: ChangeDetectionTriggerService) {
    super();
  }

  ngOnInit(): void {
    this.changeDetectionSub = changeDetectionTriggerService.trigger$
      .pipe(takeUntil(this.onDestroy$))
      .subscribe(() => this.changeDetectorRef.markForCheck());
  }

}
 

Использование в целевом компоненте:

 @Component(/** ... **/)
export class MyComponent extends BaseChangeDetectionComponent {

  constructor(private changeDetectorRef: ChangeDetectorRef,
              private changeDetectionTriggerService: ChangeDetectionTriggerService) {
    super(this.changeDetectorRef, this.changeDetectionTriggerService);
  }

}
 

Затем используйте его в любом месте, просто указав в теме:

 changeDetectionTriggerService.trigger$.next();
 

Это, вероятно, сработало бы. Но оставь это на крайний случай. Надеюсь, есть более простое и элегантное решение.

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

ViewEngine

 import { ApplicationRef, Component } from '@angular/core';

@Component({
  ...
})
export class AnyComponent {
  constructor(private appRef: ApplicationRef) {}

  runCd() {
    forceAppWideChangeDetection(this.appRef);
  }  
} 

function markParentViewsForCheck(view) {
  var currView = view;
  while (currView) {
      if (currView.def.flags amp; 2 /* OnPush */) { 
          currView.state |= 8 /* ChecksEnabled */;
      }
      currView = currView.viewContainerParent || currView.parent;
  }
}

function forEachEmbeddedViews(view, visitorVn: (view) => void) {
  const def = view.def;

  if (!(def.nodeFlags amp; 16777216 /* EmbeddedViews */)) {
    return;
  }
  for (var i = 0; i < def.nodes.length; i  ) {
    var nodeDef = def.nodes[i];
    if (nodeDef.flags amp; 16777216 /* EmbeddedViews */) { 
      var embeddedViews = view.nodes[i].viewContainer._embeddedViews;
      for (var k = 0; k < embeddedViews.length; k  ) {
        visitorVn(embeddedViews[k]);
      }
    } else if ((nodeDef.childFlags amp; 16777216) /* EmbeddedViews */ === 0) {
      i  = nodeDef.childCount;
    }
  }
}

function forEachComponentViews(view, visitorVn: (view) => void) {
  const def = view.def;
  if (!(def.nodeFlags amp; 33554432 /* ComponentView */)) {
    return;
  }
  for (var i = 0; i < def.nodes.length; i  ) {
    var nodeDef = def.nodes[i];
    if (nodeDef.flags amp; 33554432 /* ComponentView */) {
      visitorVn(view.nodes[i].componentView);
    }
    else if ((nodeDef.childFlags amp; 33554432 /* ComponentView */) === 0) {
        i  = nodeDef.childCount;
    }
  }
}

function visitView(view) {
  markParentViewsForCheck(view);

  forEachEmbeddedViews(view, visitView);
  forEachComponentViews(view, visitView);
}

function forceAppWideChangeDetection(appRef: ApplicationRef) { 
  for (const view of (appRef as any)._views) {
    visitView(view._view);
  }
}
 

Угол Стекблица 8

Плющ

В Ivy вы можете перебирать все узлы вашего отрисованного компонента и использовать __ngContext__ их для пометки соответствующего представления как грязного.

 import { Component, ɵmarkDirty } from '@angular/core';

@Component({
  ...
})
export class AnyComponent {

  runCd() {
    forceAppWideChangeDetection();
  }
}

function forceAppWideChangeDetection() {
  const CONTEXT = 8;
  const PREFIX = 'app-'.toUpperCase();
  const allHosts = 
       Array.from(document.querySelectorAll<any>('*'))
            .filter(el => !!el.__ngContext__ amp;amp; el.tagName.startsWith(PREFIX));

  for (const host of allHosts) {
    const elementWithinHost = host.firstElementChild;
    if (elementWithinHost amp;amp; elementWithinHost.__ngContext__) {
      const component = elementWithinHost.__ngContext__[CONTEXT];
      ɵmarkDirty(component)
    }
  }
}
 

Ng-запуск Угловой 11

Вы можете загрузить это на каждый компонент, который хотите отслеживать, или просто на компонент приложения. это всего лишь свободный пример. Angular выполняет проверку жизненного цикла, которую можно вызвать с помощью крючка жизненного цикла onChanges — вы должны создать входные данные, такие как данные 0 и данные 1, для каждого родительского компонента.

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

из углового cli

 import { Component, OnInit, OnChanges, SimpleChanges, Input } from '@angular/core';

@Component({
  selector: 'app-viewport-listener',
  template: '<div></div>',
  styleUrls: ['./viewport-listener.component.css']
})
export class ViewportListenerComponent implements OnInit, OnChanges {
 @Input() data: any;
  constructor() { }

  ngOnInit(): void {
  }
  ngOnChanges(changes: SimpleChanges){
    forceAppWideDetction()
  }

}
function forceAppWideDetction(){}