angular - @ViewChild 和@ContentChild 有什么区别？

Question

Angular 2 提供了@ViewChild、@ViewChildren、@ContentChild 和@ContentChildren 装饰器来查询组件的后代元素。

前两者和后两者有什么区别？

Answer 1

我将使用 Shadow DOM 和 Light DOM 术语回答您的问题(它来自网络组件，请参阅更多信息 here )。一般而言:

• 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 { /* ... */ }

所以，你的问题的答案很简单:

The difference between @ViewChildren and @ContentChildren is that @ViewChildren look for elements in Shadow DOM while @ContentChildren look for them in Light DOM.