“Viewchild”和“Contentchild”有什么区别?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (46)

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

提问于
用户回答回答于

我将使用Shadow DOMLight DOM术语回答你的问题。一般来说:

  • Shadow 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 { /* ... */ }
  • Light 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寻找在阴影DOM元素,同时@ContentChildren寻找他们光在DOM。

用户回答回答于

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

扫码关注云+社区