angular - @angular/elements 如何在 rest 调用结束时更新我的​​自定义元素？

Question

所以我有这个简单的组件:

import {
  Component,
  ViewEncapsulation,
  OnInit,
} from '@angular/core';

import { HttpClient } from '@angular/common/http';
import { BehaviorSubject } from 'rxjs';

@Component({
  selector: 'custom-element',
  template: '<div>{{ chuckText$ | async }}</div>',
  styleUrls: ['./button.component.css'],
  encapsulation: ViewEncapsulation.Native
})

export class ButtonComponent implements OnInit {

  public chuckText$ = new BehaviorSubject<string>('');

  public constructor(
    private http: HttpClient
  ) {
  this.chuckText$.next('Default Text');
}

  ngOnInit() {
    // nothing too fancy, just for testing purpose
    this.http.get('https://api.chucknorris.io/jokes/random')
      .subscribe((data: any) => {
        console.log(data.value);
        this.chuckText$.next(data.value);
      });
  }
}

在构建我的组件并将其添加到一个简单的 angularJS 应用程序之后，(我需要将一个自定义元素添加到一个旧应用程序)我在控制台中使用默认文本和 http.get 结果获取我的元素，但是我的组件还没有更新，如图。

我显然遗漏了一些对我来说并不明显的东西。关于为什么内容不更新的任何想法？ 提醒一下，此功能已发布但处于实验状态，可能仅此而已。

作为引用，这是我的 app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { HttpClientModule } from '@angular/common/http';
import { ButtonComponent } from './button/button.component';

@NgModule({
  declarations: [ButtonComponent],
  imports: [BrowserModule, HttpClientModule],
  entryComponents: [ButtonComponent],
})
export class AppModule {

  constructor(private injector: Injector) {
    const customElement = createCustomElement(ButtonComponent, { injector });
    customElements.define('custom-button', customElement);
  }

  ngDoBootstrap() { }
}

Answer 1

我的一些客户元素遇到了同样的问题。不知何故，变化检测在客户元素中的行为与在常规 Angular 应用程序中的行为不同，并且不会相应地更新 View 。

解决方案一

如果您要更新组件的状态，请手动调用 changeDetection。

在组件的构造函数中注入(inject) ChangeDetectorRef 并在每次您想更新 View 时调用 markForCheck() 或 detectChanges()。

注意 detectChanges()。它将启动 changeDetection 进程，如果您未正确使用它，可能会出现性能问题。

Docs: ChangeDetectionRef

方案二

在组件中注入(inject)NgZone并调用NgZone.run()。

例如:

this.ngZone.run(() => this.chuckText$.next(data.value))

Docs: NgZone