Подписка на изменения ViewChildren-QueryList вызывается для любых несвязанных изменений DOM - PullRequest
Новая
       8

Подписка на изменения ViewChildren-QueryList вызывается для любых несвязанных изменений DOM

0 голосов
/ 09 января 2020

В моем проекте возникла проблема, при которой для всех изменений в представлении вызывается дочерняя подписка. Мои дочерние элементы представления запрашивают список элементов ElementRefs, однако, даже если количество элементов не изменяется, подписка на изменение вызывается при изменении чего-либо в представлении. Как я могу остановить это?

https://stackblitz.com/edit/angular-yuigne

StackBlitz: https://stackblitz.com/edit/angular-yuigne

import { Component, ViewChildren, ElementRef, QueryList, AfterViewInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit {

  constructor(private el: ElementRef) {}

  @ViewChildren('itemRef')
  itemRefs = new QueryList<ElementRef>();
  toggle = true;
  items = [ 'Superman', 'Batman', 'Ironman', 'Spiderman', 'Hulk'];

  ngAfterViewInit() {
    this.itemRefs.changes.subscribe(o => {
      this.el.nativeElement.querySelector('#output').innerText += 'Changes'; 
    });
  }
}
<button (click)="toggle = !toggle">Toggle: triggers changes in ViewChildren</button>
<h2 *ngIf="toggle">Toggled ON</h2>
<h2 *ngIf="!toggle">Toggled OFF</h2>
<ul>
	<li *ngFor="let item of items" #itemRef>{{ item }}</li>
</ul>
<div>
  <input type="text" [(ngModel)]="name" placeholder="Enter superhero">
  <button (click)="name && name.length > 2 ? items.push(name) : return">Add</button>
</div>
<div id="output" style="color: red;margin-top:10px;"></div>
...