@ViewChild ve @ContentChild arasındaki fark nedir?

Eğik 2 sağlar @ViewChild, @ViewChildren, @ContentChildve @ContentChildrenbir bileşenin alt öğeleri sorgulamak için dekoratörler.

İlk ikisi ile son ikisi arasındaki fark nedir?

Sorunuzu Shadow DOM ve Light DOM terminolojisini kullanarak cevaplayacağım (web bileşenlerinden gelmiştir, daha fazla bilgi için buraya bakın ). Genel olarak:

• Gölge DOM - bileşeninizin sizin tarafınızdan ( bileşenin yaratıcısı olarak ) tanımlandığı ve son kullanıcıdan gizlenendahili bir DOM'dur. Örneğin:

@Component({
  selector: 'some-component',
  template: `
    <h1>I am Shadow DOM!</h1>
    <h2>Nice to meet you :)</h2>
    <ng-content></ng-content>
  `;
})
class SomeComponent { /* ... */ }

• Hafif DOM - bileşeninizin son kullanıcısının bileşeninize sağladığı bir DOM. Örneğin:

@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 { /* ... */ }

Yani, sorunuzun cevabı oldukça basit:

Arasındaki fark @ViewChildrenve @ContentChildrenolmasıdır @ViewChildreniken Gölge DOM'da elementler için göz @ContentChildrenIşık DOM onlar için bakmak.

Adından da anlaşılacağı gibi @ContentChildve @ContentChildrensorgular içindeki mevcut direktifleri dönecektir <ng-content></ng-content>oysa Görünümünüzün elemanı @ViewChildve @ViewChildrensadece doğrudan görünüm şablonu olan unsurların bak.

Angular Connect'teki bu video, ViewChildren, ViewChild, ContentChildren ve ContentChild hakkında mükemmel bilgiye sahip https://youtu.be/4YmnbGoh49U

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

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

Gönderen my-widgetbireyin perspektifinden, comp-abir ContentChildve comp-bbir ViewChild. CompomentChildrenve ViewChildrenxChild tek bir örneği döndürürken yinelenebilir bir değer döndürür.

Bir örnek verelim, bir ev bileşenimiz ve bir alt bileşenimiz var ve alt bileşen içinde bir küçük alt bileşen var.

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

Artık @viewChildren ile ev bileşeni bağlamındaki tüm alt öğeleri yakalayabilirsiniz, çünkü bunlar doğrudan ev bileşeni şablonuna eklenir. Ancak, <small-child>öğeye alt bileşen bağlamından erişmeye çalıştığınızda, alt bileşen şablonuna doğrudan eklenmediği için ona erişemezsiniz. İçerik bileşeni, ana bileşen tarafından alt bileşene eklenir. İşte @contentChild devreye girer ve @contentChild ile yakalayabilirsiniz.

Fark, denetleyicideki öğe başvurusuna erişmeye çalıştığınızda oluşur. @ViewChild tarafından doğrudan bileşen şablonuna eklenen tüm öğelere erişebilirsiniz. Ancak @viewChild ile yansıtılan öğeler referansını yakalayamazsınız Yansıtılan öğeye erişmek için @contentChild kullanmanız gerekir.