@ViewChild와 @ContentChild의 차이점은 무엇입니까?

@ViewChild와 @ContentChild의 차이점은 무엇입니까?

---

각도 2 제공 @ViewChild, @ViewChildren, @ContentChild및 @ContentChildren구성 요소의 하위 요소를 쿼리 장식.

첫 번째와 두 번째의 차이점은 무엇입니까?

---

Shadow DOM 및 Light DOM 용어를 사용하여 귀하의 질문에 답변 드리겠습니다 (웹 구성 요소에서 왔으므로 여기 참조 ). 일반적으로 :

• 그림자 DOM은 - 정의 된 구성 요소의 내부 DOM이다 당신에 의해 (A와 구성 요소의 창조자 최종 사용자로부터) 숨겨. 예를 들면 다음과 같습니다.

@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만 직접 뷰 템플릿에있는 요소를 살펴 봅니다.

---

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및 ViewChildrenxChild는 단일 인스턴스를 반환하는 동안 반복자를 돌려줍니다.

참고URL : https://stackoverflow.com/questions/34326745/whats-the-difference-between-viewchild-and-contentchild