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

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

Angular 2는@ViewChild,@ViewChildren,@ContentChild그리고.@ContentChildren구성 요소의 하위 요소를 쿼리하기 위한 장식자입니다.

앞의 두 개와 뒤의 두 개의 차이점은 무엇입니까?

Shadow DOM 및 Light 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에서 요소를 찾는 동안@ContentChildrenLight DOM에서 그들을 찾습니다.

이름에서 알 수 있듯이,@ContentChild그리고.@ContentChildren쿼리는 내부에 존재하는 지시어를 반환합니다.<ng-content></ng-content>반면에, 당신의 관점의 요소.@ViewChild그리고.@ViewChildren뷰 템플릿에 있는 요소만 직접 확인합니다.

Angular Connect의 이 비디오는 ViewChildren, ViewChildren, ContentChildren 및 ContentChildren 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를 사용해야 하는 투영 요소에 액세스하려면.

ViewChildren은 내부 Children으로, ContentChildren은 외부 Children으로 이름만 변경합니다.

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