相关疑难解决方法(0)

我们想放入一个ng-content内部,*ngFor然后指定ng-content使用包含ngFor的组件的内容.可能吗？

<li *ngFor="let data of dataSource">
  <ng-content></ng-content>
</li>

演示

假设我有两个组成部分:parent和child.HTML将如下所示:

<parent title="Welcome">
    <child name="Chris">Blue Team</child>
    <child name="Tom">Red Team</child>
</parent>

最终输出如下:

<h1>Welcome</h2>
<ul>
    <li><b>Chris</b> is on the Blue Team</li>
    <li><b>Tom</b> is on the Red Team</li>
</ul>

父组件:

@Component({
  selector: 'parent',
  directives: [ChildComponent], // needed?
  template: `
    <h1>{{title}}</h1>
    <ul>
       <li *ngFor="#child of children()">{{child.content}}<li>
    </ul>`
})
export class ParentComponent {

    @Input() title;

    children() {
        // how?
    }

}

如何从父级中访问子组件并获取其内容？

此外,我不希望自动渲染孩子.根据某些条件,我可能会选择不显示某些孩子.

谢谢.