@ angular / elements Как я могу обновить свой пользовательский элемент в конце вызова покоя? - PullRequest
Новая
       17

@ angular / elements Как я могу обновить свой пользовательский элемент в конце вызова покоя?

0 голосов
/ 09 июня 2018

Итак, у меня есть этот простой компонент: 

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 отображаются в консоли, но мой компонент не был обновлен, как показано на рисунке.

Like this

I 'Я явно упускаю что-то, что просто не очевидно для меня.Есть идеи, почему контент не обновляется?Напоминаем, что эта функция выпущена, но в экспериментальном состоянии, может быть, это просто.

Для справки это мой 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() { }
}

1 Ответ

0 голосов
/ 09 июня 2018

У меня такая же проблема с некоторыми из моих привычных элементов.Кто-то change detection действует в элементе custome иначе, чем в обычном угловом приложении, и не обновляет представление соответствующим образом.

Решение 1

Если вы обновляетесостояние вашего компонента вызывает changeDetection вручную.

Внедрить ChangeDetectorRef в конструктор вашего компонента и вызывать markForCheck() или detectChanges() каждый раз, когда вы хотите обновить представление.

Beв курсе detectChanges().Он запустит процесс changeDetection и может иметь проблемы с производительностью, если вы не используете его с умом.

Документы: ChangeDetectionRef

Решение 2

Внедрить NgZone в компонент и вызвать NgZone.run().

Например:

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

Документы: NgZone

...