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

经过大量测试并进一步完成所提及的重复问题及其内部链接后，它并没有完全解决我的问题，因为模板我不是试图复制内容，因为它是普通的。我正在尝试用其他常见的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;
}

还有孩子：

@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。最后，在最高级别上，您只需定义项目的模板即可。

将已转换的内容传递给嵌套列表的孙子组件

1 个答案: