Question

我试图使用自定义元素+ 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时会产生效果。我看到调用也在发生，reduce也正在更新状态，但是更改检测似乎没有起作用。

我已经尝试过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.categories$ = this.store.pipe(
      select(landingPageQuery.getAllLandingPage),
      tap(_ => this.changeDetectionRef.detectChanges())
    );

在

之后的每个发射值上尝试进行点火变化检测

<script>

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

变化检测不适用于角单元+ NgRx

2 个答案: