更改检测无法处理角度元素+ NgRx

Question

我试图使用自定义元素+ NgRX并尝试将自定义元素集成到angularjs应用程序中。每当从我的angularjs应用程序我调用自定义元素暴露方法更改检测不会发生。

调用角js

const customElement= angular.element('hello-ce')[0];
 customElement.refreshSettingProgressValue(settingsPage);

中的代码

Angular 7 + @ ngrx / store + Custom Elements中的暴露方法：

  ngOnInit(): void {
    this.isLoading$ = this.store.pipe(select(landingPageQuery.getLoading));
    this.categories$ = this.store.pipe(
      select(landingPageQuery.getAllLandingPage)
    );
  }
  @Input()
  public refreshSettingProgressValue = function (this: CompType, settingCategoryCode: string) {
    this.categories$.pipe(
      mergeMap(categories => categories),
      map(category => category.settings),
      mergeMap(settings => settings),
      filter(setting => setting.settingCodeType.code === settingCategoryCode),
      take(1)
    ).subscribe({
      next: (setting) => {
        this.store.dispatch(new ResetSettingsProgressValue(setting));
        this.store.dispatch(new LoadSettingsProgressValue(setting));
      }
    })
  }.bind(this);

我尝试在点击虚拟按钮时在Angular7应用程序中调用_refreshSettingProgressValue _并且一切正常但是当我在Angular上下文之外调用它时，我无法看到UI中的更改。 P.S LoadSettingsProgressValue有一个效果，我们称之为api。我看到调用也在发生，reducer也在更新状态，但更改检测似乎没有启动。

我已经尝试过ngzone-element-strartergy，但它没有解决我的问题

  ngDoBootstrap(): void {
    const elements: any[] = [
      [HelloWorldComponent, 'hello-ce'],
    ];
    for (const [component, name] of elements) {
      const strategyFactory = new ElementZoneStrategyFactory(component, this.injector);
      const el = createCustomElement(component, { injector: this.injector, strategyFactory  });
      customElements.define(name, el);
    }
  }

我相信我们可以明确地调用changeDetection，但是使用ngrx我们可以在哪里以及在哪里执行此操作？

谢谢

Answer 1

我在我的项目中遇到了同样的问题，并使用this.cd.detectChanges（）解决了问题。当必须像这个例子那样更新数据时：

  constructor(private cd: ChangeDetectorRef) {}

  private setState(key, value) {
    this.state = { ...this.state, [key]: value };
    this.cd.detectChanges();
  }

资料来源：https://angularfirebase.com/lessons/angular-elements-advanced-techniques/

Answer 2

最后可以通过在ngZone中运行检测到的变化，如下所示：

  this.ngZone.run(() => {
        this.store.dispatch(new ResetSettingsProgressValue(setting));
        this.store.dispatch(new LoadSettingsProgressValue(setting));
  });

在之后的每个发射值上尝试触发变化检测

    this.categories$ = this.store.pipe(
      select(landingPageQuery.getAllLandingPage),
      tap(_ => this.changeDetectionRef.detectChanges())
    );

但它不起作用!!!如果有人有更好的解决方案，请发布。谢谢