Angular 当我从属性添加对象时，元素组件不会更新

Question

我有 Angular 元素组件（Angular 8），它有 2 个道具。当我尝试在数组中推送某些内容时，Shadow-Root 不会重新渲染它（相反，计数器是）。当我在组件中推送对象时如何强制渲染？

谢谢

这是组件 class

export class CounterComponent implements OnInit {

  @Input()
  counter: number;

  @Input()
  images: Array<any>;

  constructor(private cdr: ChangeDetectorRef) { }

  ngOnInit() {
    this.counter = 0;
    this.images = [];
  }

  add() {
    this.counter++;
  }

  reduce() {
    this.counter--;
  }

  @Input()
  addImage() {
    this.images.push({ ciccio: 'piccio'}); //no rerender
    this.cdr.detectChanges(); // Error cdr is null
  }
}

AppModule

import { BrowserModule, platformBrowser } from '@angular/platform-browser';
import { NgModule, Injector } from '@angular/core';

import { CounterComponent } from './counter/counter.component';
import { createCustomElement } from '@angular/elements';

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

  constructor(private injector: Injector) {

  }

  ngDoBootstrap( ) {
    const el = createCustomElement(CounterComponent, {injector: this.injector});
    customElements.define('count-component', el);
  }
 }

这是组件模板

<div style="display: flex;justify-content: center;flex-direction: column">
    <h1>Counter component</h1>
    <h4>Count ---> {{counter}}</h4>
    <button (click)="add()">Increase</button>
    <button (click)="reduce()">Decrease</button>
</div>

<h3>
Images {{images.length}}
</h3>

Answer 1

  @Input()
  addImage() {
     this.ngZone.run(() => {
        this.images.push({ ciccio: 'piccio'}); //no rerender
     });
  }

你能尝试从 @angular/core 和运行中注入 NgZone 吗？

Answer 2

根据 Angular 文档中的 "Angular Elements Overview"：

We are working on custom elements that can be used by web apps built on other frameworks. A minimal, self-contained version of the Angular framework will be injected as a service to support the component's change-detection and data-binding functionality. For more about the direction of development, check out this video presentation.

如 8:28 in the video presentation attached above 中所述，依赖注入适用于 Angular 元素中的自定义元素。因此，将 ChangeDetectorRef 注入您的自定义元素并在改变 images 数组时调用 detectChanges()，如下所示：

export class CounterComponent /* ... */ {
    constructor(private cdr: ChangeDetectorRef) { }   
    /* ... */
    addImage() {
        this.images.push({ ciccio: 'piccio'});
        this.cdr.detectChanges(); // change detection will detect the change in `images` and render
    }
}

Answer 3

试试这个，这实际上会改变组件上图像属性的值，让它看到变化：

  @Input()
  addImage() {
    this.images = [...this.images, { ciccio: 'piccio'}]; // should render
  }

笨蛋：here

Angular 当我从属性添加对象时，元素组件不会更新

Angular Element Component doesn't update when I add object from property

angular

angular-elements

Angular 当我从 属性 添加对象时，元素组件不会更新

Angular Element Component doesn't update when I add object from property

angular

angular-elements

Angular 当我从属性添加对象时，元素组件不会更新