[解決済み】@ViewChildと@ContentChildの違いは何ですか？

質問

Angular 2が提供するもの @ViewChild , @ViewChildren , @ContentChild と @ContentChildren デコレータを使用すると、 コンポーネントの子孫要素を問い合わせることができます。

前者2つと後者2つの違いは何でしょうか？

どのように解決するのですか？

を使ってお答えします。 シャドーDOM と ライトDOM という用語があります（これはウェブコンポーネントから来ています。 こちら ). 一般的には

• シャドー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 { /* ... */ }

• ライト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 は、Light DOM でそれらを探します。