Обнаружение изменений не работает на угловых элементах + 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);

Я пытался вызвать _refreshSettingProgressValue _ внутри приложения Angular7 по нажатию фиктивной кнопки, и все работает, но когда я вызываю его вне контекста Angular, я не вижу изменений в пользовательском интерфейсе. P.S LoadSettingsProgressValue имеет эффект, когда мы вызываем некоторые API. Я вижу, что также происходит вызов, и редуктор также обновляет состояние, но обнаружение изменений, похоже, не срабатывает.

Я уже пробовал 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())
    );

, но оно не работает!!!.Если у кого-нибудь есть лучшее решение, пожалуйста, напишите.Спасибо