[Angular] @ContentChildren and QueryList

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);
        })
      });
    }
  }