如何动态获取子组件，而不是使用@ViewChild

import { Component, ViewChildren, QueryList } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-parent',
  template: `
    <app-child *ngFor="let item of items"></app-child>
  `
})
export class ParentComponent {
  @ViewChildren(ChildComponent) children: QueryList<ChildComponent>;

  ngAfterViewInit() {
    this.children.changes.subscribe(() => {
      // 子组件列表发生变化时的处理逻辑
      console.log(this.children);
    });
  }
}

// 子组件
import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<button (click)="notifyParent()">Notify Parent</button>`
})
export class ChildComponent {
  @Output() notifyParent = new EventEmitter<void>();
}

// 父组件
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <app-child *ngFor="let item of items" (notifyParent)="handleChildNotification($event)"></app-child>
  `
})
export class ParentComponent {
  handleChildNotification(event: any) {
    // 处理子组件通知的逻辑
    console.log('Child component notified:', event);
  }
}

// 子组件服务
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ChildService {
  private childrenSubject = new BehaviorSubject<any[]>([]);
  children$ = this.childrenSubject.asObservable();

  registerChild(child: any) {
    this.childrenSubject.next([...this.childrenSubject.value, child]);
  }

  unregisterChild(child: any) {
    this.childrenSubject.next(this.childrenSubject.value.filter(c => c !== child));
  }
}

// 子组件
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ChildService } from './child.service';

@Component({
  selector: 'app-child',
  template: `<div>Child Component</div>`
})
export class ChildComponent implements OnInit, OnDestroy {
  constructor(private childService: ChildService) {}

  ngOnInit() {
    this.childService.registerChild(this);
  }

  ngOnDestroy() {
    this.childService.unregisterChild(this);
  }
}

// 父组件
import { Component, OnInit } from '@angular/core';
import { ChildService } from './child.service';

@Component({
  selector: 'app-parent',
  template: `
    <app-child *ngFor="let item of items"></app-child>
  `
})
export class ParentComponent implements OnInit {
  constructor(private childService: ChildService) {}

  ngOnInit() {
    this.childService.children$.subscribe(children => {
      console.log('Children:', children);
    });
  }
}