Angular循环子组件
然后筛选出自己想要的那一个,注意:
单个的子组件是@ViewChild,多个是@ViewChildren,
监听类型是QueryList<ChildComponent>
<app-child #app *ngFor="let item of list, let i = index" [singleHero]="item"></app-child>
<app-child #single [single]="person"></app-child>
// import { Ser3Service } from './../Service/ser3.service';
// import { Ser2Service } from './../Service/ser2.service';
// import { Ser1Service } from './../Service/ser1.service';
// import { Ser4Service } from './../Service/ser4.service';
// import { Ser5Service } from './../Service/ser5.service';
// import { Ser6Service } from './../Service/ser6.service';
import { Ser7Service } from './../Service/ser7.service';
import { Ser8Service } from './../Service/ser8.service';
import { MyService } from './my.service';
import { ChildComponent } from './../child/child.component';
import { Component, OnInit,ViewChild,ElementRef,ViewChildren,QueryList,Injector } from '@angular/core';
@Component({
selector: 'app-main',
templateUrl: './main.component.html',
styleUrls: ['./main.component.less']
})
export class MainComponent implements OnInit {
@ViewChildren('app') childs!: QueryList<ChildComponent>;
@ViewChild('single', {static: true}) single: any;
constructor() { }
ngOnInit(): void {
this.list = ["hero1","hero2","hero3","hero4","hero5"]
}
show(){
console.log(this.childs.filter(x => x.singleHero =="hero2"));
}
}