使用ChangeDetectionStrategy.OnPush

问题描述

在我的角度应用程序中，我实现了加载微调器。它适用于默认更改检测，但不适用于我使用onPush的情况。

在主容器中，我将loading-spinner指令传递给组件。像这样：

  *showLoadingSpinner="['allDevices']"
  mat-table
  matSort
  matTableResponsive
  class="w-100"
  [dataSource]="dataSource"
>

加载指令：


...
@Directive({
  selector: '[showLoadingSpinner]'
})
export class ShowLoadingSpinnerDirective implements OnInit,OnDestroy {
  @Input('showLoadingSpinner') queries: string[];
  loadingState$: Observable<string[]>;
  isLoading$: BehaviorSubject<boolean> = new BehaviorSubject(null);
  spinnerComponent: ComponentRef<SpinnerComponent>;
  constructor(
    private viewContainerRef: ViewContainerRef,private templateRef: TemplateRef<any>,private factoryResolver: ComponentFactoryResolver,private loadingService: LoadingIndicatorService
  ) {
    this.loadingState$ = loadingService.getLoadingState();
  }
  private onDestroy$ = new Subject<void>();

  ngOnInit(): void {
    const spinnerFactory = this.factoryResolver.resolveComponentFactory(LoadingSpinnerComponent);
    const view = this.templateRef.createEmbeddedView(null);
    this.viewContainerRef.insert(view);
    // this.spinnerComponent = this.viewContainerRef.createComponent(spinnerFactory);
    this.loadingState$ = this.loadingService.getLoadingState();
    this.loadingState$.pipe(takeuntil(this.onDestroy$)).subscribe(loadingOperations => {
      const found = this.queries.some(query => loadingOperations.indexOf(query) >= 0);
      if (found) this.isLoading$.next(true);
      else {
        this.isLoading$.next(false);
      }
    });

    this.isLoading$.subscribe(isLoading => {
      if (isLoading === true && !this.spinnerComponent) {
        this.spinnerComponent = this.viewContainerRef.createComponent(spinnerFactory);
      } else if (isLoading === false && this.spinnerComponent) {
        const index = this.viewContainerRef.indexOf(this.spinnerComponent.hostView);
        this.viewContainerRef.remove(index);
        this.spinnerComponent = null;
      }
    });
  }
  ngOnDestroy() {
    this.onDestroy$.next();
    this.onDestroy$.complete();
  }
}

指令正在侦听使用Interceptor的服务，以检查所需的查询（在本例中为allDevices）是否仍在等待处理或完成。这种逻辑工作正常。问题是，直到查询的数据自动到达后，才会显示微调框。在加载微调器连接到视图后，如何强制视图进行更新？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular angular-changedetection angular-directive