javascript - Angular ng 内容 : how to use parents data as children input

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>