티스토리 뷰

출처 : http://stackoverflow.com/questions/34326745/whats-the-difference-between-viewchild-and-contentchild



Q : Angular 2 provides @ViewChild@ViewChildren@ContentChild and @ContentChildren decorators for querying a component's descendant elements. What's the difference between the first two and the latter two?


A : I'll answer your question using Shadow DOM and Light DOM terminology (it have come from web components, see here). In general:

  • Shadow DOM - is an internal DOM of your component that is defined by you (as a creator of the component) and hidden from an end-user. For example:
@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 - is a DOM that an end-user of your component supply into your component. For example:
@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 { /* ... */ }

So, the answer to your question is pretty simple:

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



개인적으로 공부하며 기억하기 위해 작성한 포스팅입니다.

이득을 위하여 작성된 포스팅이 아님을 알려드립니다.


'Angular2' 카테고리의 다른 글

Service 추가 및 사용  (0) 2016.12.28
Shadow DOM 스타일  (0) 2016.12.22
Angular2 CLI로 프로젝트 관리하기  (0) 2016.12.19
댓글