angular-contentChild和contentChil

上次我们聊到了angular的插槽，主要利用了特殊标签ng-content。
新建几个component：

ng g component components/father
ng g component components/child
ng g component components/other

插槽只需在模板文件声明即可。
father.component.html:

<app-child>

    <app-other></app-other>
    
</app-child>

child.component.html:

<ng-content select="app-other"></ng-content>

通过ng-content可以获取app-other组件的视图内容，如果我还想要获取插槽中包含的组件的内部信息呢？比如获取app-other组件中的属性和方法？
这时我们可以利用contentChild来解决。

contentChild

child.component.ts:

import { Component, OnInit, ContentChild} from '@angular/core';
import { OtherComponent } from '../other/other.component';//引入other组件
@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {
 
 @ContentChild(OtherComponent) other:OtherComponent;//属性装饰器 

  constructor() { }

  ngOnInit(): void {

  }

  ngAfterContentInit(): void {
    //ngAfterContentInit()是与投影内容初始化有关
    console.log(this.other.username);
    this.other.sayHello();
  }


}

contentChildren

如果是一组元素，我们可以用contentChildren。
father.component.html:

<app-child>
        <app-other [role]="'admin'"></app-other>
        <app-other [role]="'common'"></app-other>
        <app-other [role]="'user'"></app-other>
</app-child>

child.component.html:

<ng-content select="app-other"></ng-content>

child组件仍旧用ng-content占位。
child.component.ts:

import { Component, OnInit, ContentChildren,QueryList} from '@angular/core';
import { OtherComponent } from '../other/other.component';//引入other组件
@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
 
export class ChildComponent implements OnInit {

  @ContentChildren(OtherComponent) others:QueryList<OtherComponent>;//获取多个OtherComponent



  constructor() { }
  ngOnInit(): void {

  }
  ngAfterContentInit(): void {
    //ngAfterContentInit()是与投影内容初始化有关
    
    this.others.forEach(item=>{
      console.log(item.role) //遍历一组元素
      item.sayRole();//执行每个组件下面的方法
    })
   
  }


}

other.component.ts:

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

@Component({
  selector: 'app-other',
  templateUrl: './other.component.html',
  styleUrls: ['./other.component.scss']
})
export class OtherComponent implements OnInit {
  @Input() role;
  constructor() { }

  ngOnInit(): void {
    
  }
  sayRole(){
    console.log('当前角色:',this.role);
  }
}

总结

contentChild和contentChildren都是获取插槽内容的，有人也称其为投影，说的都是一个东西，就是嵌入在组件中间的那部分内容。
这部分嵌入内容，如果有component组件的话，如果只是获取组件渲染出来的视图那就用ng-content占位即可；如果要获取组件内部的信息就要用到contentChild，而如果是包含了多个组件，那就要用到contentChildren。