javascript - 将嵌入的内容传递给嵌套列表的孙组件

Question

我知道有几个问题与此类似，但它们并不完全相同。我正在构建一个嵌套列表，我想在每个孙子中与常见 html 一起显示自定义 html 内容。当我在循环外部添加到 ListComponent 时，可以正常工作，但是如果我将其在循环内部传递给内部子级，则它不会像下面的示例那样工作。我在下面的代码中传递的 html 未显示。我可能试图以错误的方式解决这个问题，但我无法让它以我尝试的任何方式工作。你们有人知道如何做到这一点吗？

谢谢!

export class Model {
  title: string;
  children?: Model[] = [];
}

@Component({
  selector: 'list',
  template: `
<ul>
  <li *ngFor="let item of items">
    <list-item [item]="item">
      <div main-content>
        <ng-content select="[main-content]"></ng-content>
      </div>
    </list-item>
    <list [items]="item.children"></list>
  </li>
</ul>
`
})
export class List {
    @Input() items: Model[];
}

@Component({
  selector: 'list-item',
  template: `
<h1>{‌{ item.title }}</h1>
<div class="content">
  <ng-content select="[main-content]"></ng-content>
</div>
`
})
export class ListItem {
  @Input() item: Model;
}

@Component({
  selector: 'app-main',
  template: `
    <list [items]="items">
      <div main-content>
        <h1>Test</h1>
      </div>
    </list>
`
})
export class AppMainComponent {
}

经过多次测试并进一步研究提到的重复问题及其内部链接，它并不能完全解决我的问题，因为模板我并没有尝试复制简单的内容。我正在尝试注入(inject)另一个组件，其中包含其他常见的 html，因此，如果我只是迭代，我将只复制我传递的模板，但我将丢失内部的所有其他 html。

Answer 1

我知道有点太晚了，但我最近遇到了类似的问题，这里的答案会对我有所帮助。

据我了解，您希望在使用列表的组件中为列表项定义模板。 为此，您需要在子组件(列表)和孙组件(项目)中使用 ng-template。

孙子应该是这样的:

  @Component({
  selector: 'app-item',
  template:`
    <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: data}">
    </ng-container>
  `
})
export class ItemComponent {
  @Input() public data;
  @ContentChild('itemTemplate') public itemTemplate;
}

还有 child :

@Component({
  selector: 'app-list',
  template:`
    <app-item [data]="dataItem" *ngFor="let dataItem of data">
          <ng-template #itemTemplate let-item>
            <ng-container *ngTemplateOutlet="itemTemplate1; context: {$implicit:  item}">
            </ng-container>
          </ng-template>
    </app-item>

  `
})
export class ListComponent {
  @Input() public data;
  @ContentChild('itemTemplate') public itemTemplate1;
}

以及使用列表的组件:

<app-list [data]="data">
  <ng-template #itemTemplate let-item>
    <h1>--{{ item?.value}}--</h1>
  </ng-template>
</app-list>

在该项目中，您使用作为内容接收的 ng-template 并将输入作为上下文传递给它。在此模板中，您可以定义该项目在列表中的外观，并通过上下文访问该项目的数据。因为您不能直接跳过一个级别，所以您还必须期望列表中有一个 ng-template。在列表中，您为该项目定义了 ng-template，在该 ng-template 中，您只需使用通过 ng-container 从上面接收到的 ng-template。最后，在最高级别，您可以简单地定义该项目的模板。