Question

我有这样的嵌套ng-template结构。

@Component({
  selector: 'my-app',
  template: `
    <list>
      <ng-template *ngFor="let item of Items" #ListItem>
        <ng-template #ListItemLine>{{ item[0] }}</ng-template>
        <ng-template #ListItemLine>{{ item[1] }}</ng-template>
        <ng-template #ListItemLine>{{ item[2] }}</ng-template>
        I can see this line, but can't get above templates
      </ng-template>
    </list>
  `,
})
export class App {
  Items: Array<Array<string>> = [
    [ "1-1", "1-2", "1-3", ],
    [ "2-1", "2-2", "2-3", ],
    [ "3-1", "3-2", "3-3", ],
    [ "4-1", "4-2", "4-3", ],
    [ "5-1", "5-2", "5-3", ],
  ]
}

如何在我的组件中呈现孩子ng-component：

@Component({
  selector: 'list',
  template: `
    <ul>
      <li *ngFor="let item of Items">
        <ng-container *ngTemplateOutlet="item"></ng-container>
      </li>
    </ul>
  `,
})
export class ListComponent {

  @ContentChildren('ListItem') public Items;

}

Plunkr https://plnkr.co/edit/Hi1ZqPAAYyIbclUuzRrl?p=preview

提前谢谢。

更新

最后我想将Angular Material组件包装到我的组件中，所以如果我找到一个比材料更好的UI，我不应该在程序中更改Material组件的所有精确性，我只需要更改我的包装器UI组件的实现。

例如，让我们尝试包装mat-list组件。我需要为mat-list容器创建一个包装器，我们称之为my-list：

@Component({
  selector: 'my-list',
  template: `
    <mat-list>
      <ng-content></ng-content>
    </mat-list>
  `,
})

和mat-list-item的包装器：

@Component({
  selector: 'my-list-item',
  template: `
    <mat-list-item>
      <ng-content></ng-content>
    </mat-list>
  `,
})

HTML呈现结果将是：

我的列表
- 垫列表
  - 我的列表项
    - 垫列表项
  - ...

每个Material组件都被我的包装器包围，因此Material附带的指令和样式将不起作用。

Answer 1

以下是根据您提供的信息解决此问题的方法。正如您已经建议的那样，我制作了两个组件list和list-item。列表组件基于输入数组呈现list-item组件，列表组件的内容必须包含定义列表项模板的模板。示例代码：

    @Component({
      selector: 'list',
      template: `
        <ul>
          <list-item *ngFor="let item of items" [data]="item" [itemTemplate]="itemTemplate"></list-item>
          <ng-content></ng-content>
        </ul>
      `,
    })
    export class ListComponent {
      @ContentChild(TemplateRef)
      public itemTemplate: TemplateRef;
      @Input()
      public items: any[];

    }

然后list-item组件只呈现容器元素中提供的列表项模板。示例代码：

@Component({
  selector: 'list-item',
  template: `
      <li>
        <ng-container *ngTemplateOutlet="itemTemplate; itemContext"></ng-container>
      </li>
  `,
})
export class ListItemComponent {
  @Input()
  public data: any;
  @Input()
  public itemTemplate: Template;
  public get itemContext(): any {
    return { $implicit: data };
  }
}

然后您可以以不同的方式使用它。我只是一个简单的列表和另一个项目模板再次列表的示例，因此您可以获得一个与树相似的列表。示例代码：

@Component({
  selector: 'my-app',
  template: `
    <list [items]="Items">
      <ng-template let-items>{{ items | json }}</ng-template>
    </list>
    <list [items]="Items">
      <ng-template let-items>
        <list [items]="items">
          <ng-template let-items>{{ items | json }}</ng-template>
        </list>
      </ng-template>
    </list>
  `,
})
export class App {
  Items: Array<Array<string>> = [
    [ "1-1", "1-2", "1-3", ],
    [ "2-1", "2-2", "2-3", ],
    [ "3-1", "3-2", "3-3", ],
    [ "4-1", "4-2", "4-3", ],
    [ "5-1", "5-2", "5-3", ],
  ]
}

我还制作了一个带有代码的plunker示例，您可以在其中运行它。 Plunker Sample

如何呈现嵌套的ng-template

1 个答案: