如何在Angular2中为页面上的所有组件实例设置值？

我有以下内容：

import { Component, Input, Output, OnInit, EventEmitter, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'counter',
  templateUrl: './counter.component.html',
  styleUrls: ['./counter.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CounterComponent {

ngOnInit()
{
  this.defaultCount = this.count;
}

  @Input()
  count: number;
  defaultCount: number;

  @Output()
  change: EventEmitter<number> = new EventEmitter<number>();

  increment() {
    this.count++;
    this.change.emit(this.count);
  }

  decrement() {
    if(this.count > 0)
    {
    this.count--;
    this.change.emit(this.count);
    }
  }

  reset()
  {
    this.count = this.defaultCount;
    this.change.emit(this.count);
  }
}

在

resetAll（event）

函数中，我想为页面上此组件的每个实例设置

[count]

，就像在增加、减少或重置事件之前一样。

---

如何仅列出此组件的一个实例，并通过调用每个实例的重置函数重置

[count]

属性？我必须为每个组件添加相同的Id并按Id查找，或者我可以按类型查找组件？在我的例子中，类型是

计数器组件

您应该初始化父组件上的

计数器

值，在您的示例中，AppComponent：

组成部分

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  firstCounter: number = 5;
  secondCounter: number = 10;

  resetAll(event) {
    this.firstCounter = 5;
    this.secondCounter = 10;
  }
}

@ViewChildren(counterComponent) counters: QueryList<counterComponent>

this.counters.forEach(counterInstance => counterInstance.count=5);

html

反观察者服务

import { Injectable } from '@angular/core';
import { v4 as uuid } from 'uuid';
import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

export interface CounterObservable {
  id: string;
  initialCount: number;
  currentCount: BehaviorSubject<number>;
}

@Injectable()
export class CounterObserverService {

  private counters: CounterObservable[] = [];

  constructor() {}

  register(initialCount: number): CounterObservable {
    const counterObservable = {
      id: uuid(),
      initialCount,
      currentCount: new BehaviorSubject<number>(initialCount)
    }
    this.counters.push(counterObservable);
    return counterObservable;
  }

  unregister(counterObservable: CounterObservable): void {
    const index = this.counters.indexOf(counterObservable);
    if (index > -1) {
      this.counters.splice(index, 1);
    }
  }

  reset(id: string): void {
    const counterObservable = this.counters.find((item) => item.id === id);
    if (counterObservable) {
      counterObservable.currentCount.next(counterObservable.initialCount);
    }
  }

  resetAll() {
    this.counters.forEach((counterObservable) => {
      counterObservable.currentCount.next(counterObservable.initialCount);
    });
  }

}

---

您应该初始化父组件（在您的示例中为AppComponent）上的

计数器
值：

组成部分

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  firstCounter: number = 5;
  secondCounter: number = 10;

  resetAll(event) {
    this.firstCounter = 5;
    this.secondCounter = 10;
  }
}

@ViewChildren(counterComponent) counters: QueryList<counterComponent>

this.counters.forEach(counterInstance => counterInstance.count=5);

html

反观察者服务

import { Injectable } from '@angular/core';
import { v4 as uuid } from 'uuid';
import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

export interface CounterObservable {
  id: string;
  initialCount: number;
  currentCount: BehaviorSubject<number>;
}

@Injectable()
export class CounterObserverService {

  private counters: CounterObservable[] = [];

  constructor() {}

  register(initialCount: number): CounterObservable {
    const counterObservable = {
      id: uuid(),
      initialCount,
      currentCount: new BehaviorSubject<number>(initialCount)
    }
    this.counters.push(counterObservable);
    return counterObservable;
  }

  unregister(counterObservable: CounterObservable): void {
    const index = this.counters.indexOf(counterObservable);
    if (index > -1) {
      this.counters.splice(index, 1);
    }
  }

  reset(id: string): void {
    const counterObservable = this.counters.find((item) => item.id === id);
    if (counterObservable) {
      counterObservable.currentCount.next(counterObservable.initialCount);
    }
  }

  resetAll() {
    this.counters.forEach((counterObservable) => {
      counterObservable.currentCount.next(counterObservable.initialCount);
    });
  }

}

您可以通过@ViewChildren使用。
例如：
添加父组件

@ViewChildren(counterComponent) counters: QueryList<counterComponent>

this.counters.forEach(counterInstance => counterInstance.count=5);

@ViewChildren（计数器组件）计数器：QueryList
this.counters.forEach（counterInstance=>counterInstance.count=5）；
您可以由@ViewChildren使用。
例如：
添加父组件

@ViewChildren(counterComponent) counters: QueryList<counterComponent>

this.counters.forEach(counterInstance => counterInstance.count=5);

@ViewChildren（计数器组件）计数器：QueryList
this.counters.forEach（counterInstance=>counterInstance.count=5）；
谢谢。这是一个选项，但是如果有很多这样的组件并且它们是动态添加的，那么它就不太合适了。请看我换了密码和问题。谢谢。这是一个选项，但是如果有很多这样的组件并且它们是动态添加的，那么它就不太合适了。请看我换了密码和问题。
@ViewChildren(counterComponent) counters: QueryList<counterComponent>

this.counters.forEach(counterInstance => counterInstance.count=5);