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

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

Я отвечу на ваш вопрос, используя терминологию Shadow DOM и Light DOM (она появилась из веб-компонентов, см. Здесь ). В целом:

  • Shadow DOM – это внутренняя DOM вашего компонента, которая определена вами (как создатель компонента ) и скрыта от конечного пользователя. Например:
 @Component({ selector: 'some-component', template: ` 

I am Shadow DOM!

Nice to meet you :)

`; }) class SomeComponent { /* ... */ }
  • Light DOM – это DOM, который является конечным пользователем вашего компонента в вашем компоненте. Например:
 @Component({ selector: 'another-component', directives: [SomeComponent], template: `  

Hi! I am Light DOM!

So happy to see you!

` }) class AnotherComponent { /* ... */ }

Итак, ответ на ваш вопрос довольно прост:

Разница между @ViewChildren и @ContentChildren заключается в том, что @ViewChildren ищет элементы в Shadow DOM, а @ContentChildren ищет их в Light DOM.

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

Это видео от Angular Connect имеет отличную информацию о ViewChildren, ViewChild, ContentChildren и ContentChild https://youtu.be/4YmnbGoh49U

 @Component({ template: `    ` }) class App {} @Component({ selector: 'my-widget', template: `` }) class MyWidget {} 

С точки зрения my-widget comp-a – это ContentChild а comp-bViewChild . CompomentChildren и ViewChildren возвращают итерацию, в то время как xChild возвращает один экземпляр.

  • Загрузите внешний CSS-стиль в компонент Angular 2
  • Не может связываться с 'for', поскольку это не известное свойство native angular2
  • Использование разрешения в Angular2 Routes
  • Настройка переменных динамической области в AngularJs - область.
  • Угловой 2.0 маршрутизатор не работает при перезагрузке браузера
  • Угловой 2.0. Разница @View @Component
  • Что делает атрибут «ng-reflect- *» в Angular2 / 4?
  • Проблема с обнаружением изменений. Почему это изменяется, когда это одна и та же ссылка на объект с On Push
  • Как определить изменение маршрута в Угловом?
  • Угловая 2: маршрутизация без изменения URL-адреса
  • Как привязать к атрибуту data- * в угловом2?
  • Interesting Posts

    Как сериализовать анонимный тип C # в строку JSON?

    Максимальное количество streamов в приложении .NET?

    сценарий установки вышел с ошибкой: команда «x86_64-linux-gnu-gcc» не удалась с статусом выхода 1

    Утечка ресурсов: «in» никогда не закрывается

    Предложения для отладки таблиц стилей печати?

    Как вы запускаете .exe с параметрами с помощью оболочки vba ()?

    Как просмотреть файл Realm в браузере Realm?

    Ошибка углового ng-repeat «Дубликаты в ретрансляторе не допускаются».

    Зарегистрировать все запросы в mysql

    Инструменты для создания загрузочного USB-накопителя с загрузочного компакт-диска

    Android: проверка сети 3G или Wi-Fi включена или доступна или нет на устройстве Android

    Android – получить реальный путь .txt-файла, выбранного из файла explorer

    Объявление открытого пространства Open Graph: HTML с XMLNS или префикс главы?

    Нет сгенерированного файла R.java в моем проекте

    Насколько дорогим является RTTI?

    Давайте будем гением компьютера.