Angular-装饰器（Decorator）

@ContentChildren && @ContentChild

功能

@ContentChildren 是一个装饰器，它允许你从组件的内容中获取一组子元素的查询列表，你可以使用它来访问投影到组件中的元素。@ContentChild 与 @ContentChildren很类似，只是前者只会获取第一个匹配的元素（child:childern)。

特性

@ContentChildren && @ContentChild只可以获取到使用了它们的组件对应的模板的内容。

使用及优势

由于这两个装饰器获取的是父组件投影到子组件的内容，因此假设有这样一个子组件

@Component({
  selector: 'app-test-component',
  templateUrl: './test-component.component.html',
  styleUrls: ['./test-component.component.scss']
})
export class TestComponentComponent implements OnInit, AfterContentInit{

  @ContentChildren('item') items?: QueryList<ElementRef>;
  
  ngAfterContentInit(): void {
    console.log("AfterContentInit: ");
    console.log(this.items);
  }
}

和这样一个父组件模板

<app-test-component>
  <div #item>Item 1</div>
  <div #item>Item 2</div>
</app-test-component>

最终我们在控制台可以看到如下输出

注意，为什么在ngAfterContentInit方法中去查看items，是因为在这个生命周期中已经把外部内容投影进组件/指令，此时是最早可以查看投影内容的时机。

可以看到，对于模板引用变量，直接将变量名字符串作为参数即可，如果是想获取指令的话，将指令的类名作为参数即可。