变化检测不适用于角度元素 + NgRx答案

【问题标题】：Change detection not working on angular elements + NgRx变化检测不适用于角度元素 + NgRx
【发布时间】：2019-09-02 09:44:59
【问题描述】：

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

Angular js 中的调用代码 const customElement= angular.element('hello-ce')[0]; customElement.refreshSettingProgressValue(settingsPage);

Angular 7 中的公开方法 + @ngrx/store + 自定义元素：

  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 我们可以如何以及在哪里做到这一点？

谢谢

【问题讨论】：

标签： angular ngrx web-component custom-element angular-elements

【解决方案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/

【讨论】：

【解决方案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())
    );

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

【讨论】：