@ViewChild和@ContentChild有什么区别？

Question

角2提供@ViewChild，@ViewChildren，@ContentChild和@ContentChildren用于查询一个组件的派生元素装饰器。前两个和后两个有什么区别？

Answer 1

我将使用Shadow DOM和Light DOM术语回答您的问题（它来自Web组件，请参见此处）。一般来说：

影子DOM-是组件的内部DOM，由您定义（作为组件的创建者）并向最终用户隐藏。例如：

@Component({

  selector: 'some-component',

  template: `

    <h1>I am Shadow DOM!</h1>

    <h2>Nice to meet you :)</h2>

    <ng-content></ng-content>

  `;

})

class SomeComponent { /* ... */ }

轻型DOM-是组件的最终用户提供给组件的DOM。例如：

@Component({

  selector: 'another-component',

  directives: [SomeComponent],

  template: `

    <some-component>

      <h1>Hi! I am Light DOM!</h1>

      <h2>So happy to see you!</h2>

    </some-component>

  `

})

class AnotherComponent { /* ... */ }

因此，您的问题的答案非常简单：

@ViewChildren和之间的区别@ContentChildren是，@ViewChildren在Shadow DOM 中查找元素，而@ContentChildren在Light DOM 中查找元素。

Answer 2

正如其名，@ContentChild并@ContentChildren查询将返回现有的内部指令<ng-content></ng-content>视图的元素，而@ViewChild并@ViewChildren不仅要看直接对你的视图模板元素。