Я хотел бы создать директиву parent, которая показывает или скрывает дочерние элементы на основе значений дочерних элементов. Для этого я использовал подход родительской структурной директивы и дочернюю директиву со значениями. Для простоты без значений:
<div *appParent>
<div appChild>1</div>
<div appChild>2</div>
<div appChild>3</div>
<div appChild>4</div>
</div>
Для доступа к дочерним элементам я использую следующую строку в родительской директиве:
@ContentChildren(AppChildDirective, { read: AppChildDirective, descendents: true }) children: QueryList<AppChildDirective>;
Этот список запросов всегда пуст. Однако, когда я изменяю его на неструктурный, он работает нормально. Демонстрация Stackblitz здесь
Я предполагаю, что это связано с тем, что структурная директива создает родительский элемент ng-template
, который @ContentChildren
затем просматривает внутри, чтобы найти исходный компонент, что означает, что запрос на самом деле никуда не денется.
Какой подход я могу использовать для доступа к дочерним элементам исходного компонента, а не к шаблону? Или мне нужно использовать другой подход для удовлетворения моих требований?