1

我正在尝试在 Angular 中构建一个可以在内部渲染不同组件的组件；它就像一个动态表格，因此当用户单击该行时，它会展开以显示某些内容；取决于某些东西，理想情况下是任何东西。

所以，我正在尝试使用 ng-content，但它并没有像我预期的那样工作。我试图将它减少到我想要的plunker中的最小功能。

基本上，我有一个父组件（my-parent），它是一个表格并显示行列表，但对于每一行，我还希望在下面显示另一行，其中包含其父级投影的组件内容。

我的应用组件

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <my-parent [data]="rows">
        <my-child *ngFor="let r of rows" [name]="r.name"></my-child>
      </my-parent>
    </div>
  `
})
export class AppComponent { 

  rows = [
    { name: 'data1' },
    { name: 'data2' },
    { name: 'data3' },
    { name: 'data4' }
  ];
}

我在 my-parent 中投影 4 个组件，每行一个。

然后在我的父母

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'my-parent',
  template: `
    <table>
      <thead>
        <tr>
          <th>my data header</th>
        </tr>
      </thead>
      <tbody>
        <ng-container *ngFor="let d of data">
          <tr>
            <td>{{ d.name }}</td>
          </tr>
          <tr>
            <td>
              <ng-content></ng-content>
            </td>
          </tr>
        </ng-container>
      </tbody>
    </table>
  `
})
export class ParentComponent {
  @Input() data: any;
}

在这里，我显示所有行，并且我希望每一行也有它的相关行波纹管。

最后，my-child 组件

import { Component, Input } from '@angular/core';

@Component({
  selector: 'my-child',
  template: `
    <h2>name: {{ name }}</h2>
  `
})
export class ChildComponent {
  @Input() name: string;
}

这实际上做了一些事情，它显示表中的所有行，然后投影所有组件

my data header
data1
data2
data3
data4
name: data1

name: data2

name: data3

name: data4

但我想这样显示

my data header
data1
name: data1

data2
name: data2

data3
name: data3

data4
name: data4

我理解我这样做的方式没有多大意义，因为我没有告诉 Angular 在哪里显示每个投影组件，但是我尝试了ng-content select它但它不起作用，因为我的选择必须是动态的，比如ng-content select="#{{d.name}}"和使用<my-child id="{{r.name}}"></my-child>

我读过有关使用模板和东西的信息，但老实说，我无法理解它。任何人都愿意看看plunker并提出一些建议吗？

谢谢

4

0 回答 0