0

我试图使用自定义元素 + 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 中的更改。PS LoadSettingsProgressValue在我们调用一些 api 的地方有效果。我看到调用也在发生，reducer 也在更新状态，但更改检测似乎没有启动。

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

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

谢谢

4

2 回答 2

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/

于 2019-05-16T09:10:23.050 回答
0

最后可以通过在 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())
    );

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

于 2019-04-12T16:00:58.920 回答