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

Question

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

\n\n

谢谢！

\n\n

export class Model {\n  title: string;\n  children?: Model[] = [];\n}\n\n@Component({\n  selector: \'list\',\n  template: `\n<ul>\n  <li *ngFor="let item of items">\n    <list-item [item]="item">\n      <div main-content>\n        <ng-content select="[main-content]"></ng-content>\n      </div>\n    </list-item>\n    <list [items]="item.children"></list>\n  </li>\n</ul>\n`\n})\nexport class List {\n    @Input() items: Model[];\n}\n\n@Component({\n  selector: \'list-item\',\n  template: `\n<h1>{\xe2\x80\x8c{ item.title }}</h1>\n<div class="content">\n  <ng-content select="[main-content]"></ng-content>\n</div>\n`\n})\nexport class ListItem {\n  @Input() item: Model;\n}\n\n@Component({\n  selector: \'app-main\',\n  template: `\n    <list [items]="items">\n      <div main-content>\n        <h1>Test</h1>\n      </div>\n    </list>\n`\n})\nexport class AppMainComponent {\n}\n

\n\n

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

\n

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;
}

还有孩子：

@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。最后，在最高级别，您可以简单地定义该项目的模板。