角度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

使用template reference variables可以实现最接近您期望的用法的解决方案：

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