Angular 如何呈现嵌套的ng模板

我有这样的嵌套

ng模板

结构

@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", ],
  ]
}

普朗克

先谢谢你

更新

最后，我想将角度材质组件包装到我的组件中，因此，如果我能找到比材质更好的UI，我不必在我的程序中更改材质组件的所有精度，我只需要更改包装UI组件的实现

例如，让我们尝试包装

mat list

组件。我需要为

mat list

容器做一个包装，我们称之为

my list

：

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

HTML呈现结果将是：

• 我的名单
  • 材料清单
    • 我的列表项
      • 列表项

---

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

根据您提供的信息，我将如何解决此问题。正如您所建议的，我制作了两个组件

列表

和

列表项

。 列表组件根据输入数组呈现

列表项

组件，并且列表组件的内容必须包含定义列表项模板的模板。示例代码：

    @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[];

    }

@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", ],
  ]
}

然后，您可以以不同的方式使用它。我举了一个例子，一个简单的列表，另一个项目模板也是一个列表，所以你可以得到一个类似于树的列表。示例代码：

    @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[];

    }

@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", ],
  ]
}

@组件({
选择器：“我的应用程序”，
模板：`
{{items}json}
{{items}json}
`,
})
导出类应用程序{
Items:Array
我认为您并不真正需要嵌套模板。您能详细解释一下您试图实现的目标吗？因为您只选择父模板，所以代码中只呈现父模板。@ContentChildren（'ListItem'））仅选择顶层模板，以便只渲染顶层模板。要同时渲染子模板，您必须对其进行处理。也许您应该使用普通的*ngfor来扩展父模板中的嵌套对象，并避免使用嵌套模板。@AlesD
ng template
为我提供了渲染其内容的机会没有包装器元素，所以
ng template
的嵌套结构应该给我机会呈现一个没有包装器的元素树。最后，我想在我的组件中加入Material list组件，并能够使用像
matLine
这样的指令，如果它被包装就不起作用了。@AlesD Yes我知道我不知道对它们进行排序，因为我不知道如何引用它们。如果你想从另一个模板中引用它们，你需要在代码中这样做，我仍然认为有更好的解决方案。如果你想构建递归树结构，你可以构建递归组件。谢谢你的帮助，但这不是我所期望的。它看起来
ng template
和
ng container
的可能性对于我来说是不够的。您的示例通过输入传递数据，我希望所有数据都通过内容传递。无论如何，您的示例非常有用。我将做一些变通，也许以后会做一些自定义模板。