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

예를 들어, 하나의 홈 구성 요소와 하나의 하위 구성 요소와 내부 하위 구성 요소가 하나의 작은 하위 구성 요소가 있습니다.

<home>
     <child>
           <small-child><small-child>
     </child>
</home>

홈 컴포넌트의 템플릿에 직접 추가되므로 @viewChildren을 사용하여 홈 컴포넌트의 컨텍스트에서 모든 하위 요소를 가져올 수 있습니다. 그러나 액세스하려고 할 때<small-child> 자식 구성 요소의 컨텍스트에서 요소 자식 구성 요소 템플릿 내에 직접 추가되지 않으므로 해당 요소에 액세스 할 수 없습니다. 홈 컴포넌트별로 컨텐츠 프로젝션을 통해 하위 컴포넌트로 추가됩니다. 이것은 @contentChild가 들어오는 곳이며 @contentChild로 가져올 수 있습니다.

컨트롤러에서 요소 참조에 액세스하려고 할 때 차이가 발생합니다. @viewChild에 의해 컴포넌트 템플릿에 직접 추가 된 모든 요소에 액세스 할 수 있습니다. 그러나 @viewChild로 투영 된 요소 참조를 가져올 수 없습니다. 투영 된 요소에 액세스하려면 @contentChild를 사용해야합니다.