angular

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에서 그들을 찾아보십시오.

답변

@Component({
  template: `
    <my-widget>
      <comp-a/>
    </my-widget>
`
})
class App {}

@Component({
  selector: 'my-widget',
  template: `<comp-b/>`
})
class MyWidget {}

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