问@ViewChild和@ContentChild有什么区别？

EN

顾名思义，@ContentChild和@ContentChildren查询将返回存在于视图的<ng-content></ng-content>元素中的指令，而@ViewChild和@ViewChildren只直接查看视图模板中的元素。

这段来自Angular Connect的视频提供了有关ViewChildren、ViewChild、ContentChildren和ContentChild https://youtu.be/4YmnbGoh49U的精彩信息

@Component({
  template: `
    <my-widget>
      <comp-a/>
    </my-widget>
`
})
class App {}

@Component({
  selector: 'my-widget',
  template: `<comp-b/>`
})
class MyWidget {}

从my-widget的角度来看，comp-a是ContentChild，comp-b是ViewChild。CompomentChildren和ViewChildren返回一个迭代器，而xChild返回一个实例。

让我们举个例子，我们有一个home组件和一个子组件，并且在子组件内部有一个小的子组件。

<home>
     <child>
           <small-child><small-child>
     </child>
</home>

现在您可以使用@viewChildren获取home组件上下文中的所有子元素，因为这些元素是直接添加到home组件的模板中的。但是，当您尝试从子组件的上下文访问<small-child>元素时，您无法访问它，因为它不是直接添加到子组件模板中的。它是由home组件通过内容投影添加到子组件中的。这就是@contentChild的用武之地，你可以用@contentChild抓住它。

当您尝试访问控制器中的元素引用时，就会出现这种差异。您可以通过@viewChild访问grab所有直接添加到组件模板中的元素。但是你不能用@viewChild获取投影元素的引用来访问投影元素，你必须使用@contentChild。