Question

我创建了一个PopupService，如下所示：

export class PopupService {

  popups: PopupComponent[] = [];

  open(popup: PopupComponent) {
    this.popups.forEach(popup => popup.active = false);
    popup.active = true;
  }

  close(popup: PopupComponent) {
    popup.active = false;
  }  

}

弹出窗口应该是QueryList而不是Array？

popups: QueryList<PopupComponent>;

PopupComponent如下：

export class PopupComponent implements OnInit {

  @Input() active: boolean = false;

  constructor(public popupService: PopupService) { }

  ngOnInit() {
    this.popupService.popups.push(this);
  }

  close() {
    this.popupService.close(this);
  }

  toggle() {
    if (this.active)
      this.popupService.close(this);
    else
      this.popupService.open(this);
  }

}

Answer 1

简短：对于您的用例，一个简单的数组就足够了

长：出于两个in the docs记录的原因，您不应在用例中使用QueryList<T>：

它是不可变列表的抽象，所以您不能做类似this.popupService.popups.push(this);的事情。您可以通过调整服务的API来克服这一点。
它应该存储ViewChildren和 ContentChildren，您正在使用。因此，基本上，angular应该负责管理它的实例，而不是您。这是我回答背后的主要原因。

使用Array或QueryList来保存服务中的组件列表？

1 个答案: