We have looked at @ContentChild in article(http://www.cnblogs.com/Answer1215/p/6414657.html).
Now let‘s how to query multi children by using @ContentChildren and QueryList.
First of all, let‘s add few more auth-remember component into our form component.
<auth-form (submitted)="loginUser($event)"> <h3>Login</h3> <auth-remember [role]="‘checkbox1‘" (checked)="rememberUser($event)"> </auth-remember> <auth-remember [role]="‘checkbox2‘" (checked)="rememberUser($event)"> </auth-remember> <auth-remember [role]="‘checkbox3‘" (checked)="rememberUser($event)"> </auth-remember> <button type="submit"> Login </button> </auth-form>
Then inside auth-form component, we can query all the auth-remember components:
@ContentChildren(AuthRememberComponent) remembers: QueryList<AuthRememberComponent>;
Then lot out in the ngAfterContentInit lifecycle:
ngAfterContentInit(): void { if(this.remembers) { this.remembers.forEach((item: AuthRememberComponent, i: number) => { console.log("item:", item); item.checked.subscribe((checked: boolean) => { console.log(`${i}: checked`, checked); }) }); } }
[Angular] @ContentChildren and QueryList
原文：http://www.cnblogs.com/Answer1215/p/6414674.html