В чем разница между @ViewChild и @ContentChild?

Question

В чем разница между @ViewChild и @ContentChild?

угловой 2 обеспечивает @ViewChild,@ViewChildren,@ContentChild и @ContentChildren декораторы для запроса дочерних элементов компонента. Какая разница между первыми двумя и последними двумя?

909 3

angular

3 ответов:

Comments

Ничего не найдено.

alexpods · Accepted Answer · 2015-12-17 08:11:02

Я отвечу на ваш вопрос с помощью тень дом и Light 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 - это дом, который конечный пользователь вашего компонента поставка в ваш компонент. Например:
@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 ищите элементы в Shadow DOM while @ContentChildren ищите их в Light DOM.

drewmoore · Accepted Answer · 2015-12-17 07:26:39

как следует из названия,@ContentChild и @ContentChildren запросы будут возвращать директивы, существующие внутри <ng-content></ng-content> элемент вашего представления, тогда как @ViewChild и @ViewChildren только посмотрите на элементы, которые находятся на вашем шаблоне напрямую.

mithun_daa · Accepted Answer · 2016-02-25 01:44:08

это видео от 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 и ViewChildren возвращает итерацию, в то время как xChild возвращает один экземпляр.