Angular ng-content: как использовать данные родителей в качестве входных данных для детей

Question

У меня есть компонент, который использует <ng-content></ng-content>, и этот компонент сам имеет некоторые данные, которые должны быть переданы любому компоненту, который находится внутри тегов <ng-content></ng-content>.

Компонент, который использует ngContent:

parent.component.ts

class ParentComponent {
    data;
}

parent.component.html

<p>Data:</p>
<ng-content><ng-content>

Компонент, который должен входить в компонент, который использует ngContent:

child.component.ts

class ChildComponent {
    // I need this to be passed from parent component
    @Input() data; 
}

child.component.html

<ul>
    <li *ngFor="let element of data">{{ element.name }}</li>
</ul>

Желаемое использование:

view.component.html

<parent-component>
    <child-component [data]="data"></child-component>
</parent-component>

Есть ли способвход child-component [data] взят из parent-component?Я попробовал этот подход в личном проекте, но я получаю пустой список, как-то не прошел.

Answer 1

Решение, наиболее близкое к вашему желаемому использованию, будет достигнуто путем использования шаблонных переменных :

<parent-component #parent>
  <child-component [data]="parent.data"></child-component>
</parent-component>