Angular 是否将“角度材质栅格列表”组件的“列表”和“项目”拆分为单独的组件？

我正在使用Angular2材质，我想将

列表

和

项

拆分为单独的组件

这是我的

列表

：

@组件({
选择器：“应用程序列表”，
模板：`
预期结构如下：

<md-grid-list cols="12">
  <!-- Item 1 -->
  <md-grid-tile [colspan]="6"></md-grid-tile>
  <md-grid-tile [colspan]="6"></md-grid-tile>

  <!-- Item 2 -->
  <md-grid-tile [colspan]="6"></md-grid-tile>
  <md-grid-tile [colspan]="6"></md-grid-tile>
</md-grid-list>



…但实际的DOM结构是：

<md-grid-list cols="12">
  <!-- Item 1 -->
  <app-item> <!-- same issue if I replace this with `div` or `span` -->
    <md-grid-tile [colspan]="6"></md-grid-tile>
    <md-grid-tile [colspan]="6"></md-grid-tile>
  </app-item>

  <!-- Item 2 -->
  <app-item>
    <md-grid-tile [colspan]="6"></md-grid-tile>
    <md-grid-tile [colspan]="6"></md-grid-tile>
  </app-item>
</md-grid-list>


，但属性选择器对我也不起作用。无论包装组件是
还是
或
还是其他什么，样式都会中断

有人知道我是否可以在没有任何父包装的情况下呈现子组件吗？您是否可以为我的用例建议一种解决方法？
您可以使用属性选择器和
ng container
，这将使您的父组件如下所示：

@Component({
  selector: 'app-list',
  template: `
    <md-grid-list cols="12">
        <ng-container appItem *ngFor="let item of items"></ng-container>
    </md-grid-list>
  `
})

@Component({
  selector: '[appItem]',
  template: `
    <md-grid-tile [colspan]="6">
      First
    </md-grid-tile>
    <md-grid-tile [colspan]="6">
      Second
    </md-grid-tile>
  `
})
export class VehiclesItemComponent implements OnInit { }

@组件({
选择器：“应用程序列表”，
模板：`
`
})

然后子组件将如下所示：

@Component({
  selector: 'app-list',
  template: `
    <md-grid-list cols="12">
        <ng-container appItem *ngFor="let item of items"></ng-container>
    </md-grid-list>
  `
})

@Component({
  selector: '[appItem]',
  template: `
    <md-grid-tile [colspan]="6">
      First
    </md-grid-tile>
    <md-grid-tile [colspan]="6">
      Second
    </md-grid-tile>
  `
})
export class VehiclesItemComponent implements OnInit { }

@组件({
选择器：“[appItem]”，
模板：`
弗斯特
第二
`
})
导出类VehiclesItemComponent实现OnInit{}
@sergeras，不起作用

我很惊讶，使用属性选择器和
的方法导致了一个错误，我在Angular Material 2官方存储库中看到了这个错误

Jeremy Elbourn，Angle Material 2的主要贡献者之一，提供：

…您可以将网格列表视为具有特定API的单个UI组件。将网格分幅放置在另一个组件中会完全隐藏网格列表，因为每个组件实际上都是一个黑匣子

因此，我的问题的答案是：目前不可能在不同的Angular2组件中分离Angular2材质的列表和列表项。
Hm，此解决方案引发以下错误：
无法在“节点”上执行“appendChild”：此节点类型不支持是方法。
我遗漏了什么吗？当我尝试此方法时，我得到了与@KaloyanKosev相同的结果。看起来ng容器不喜欢属性选择器…@JoãoMendes我发现了我们的问题！遗憾的是，我们想要实现的事情是不可能的。我还没有找到任何解决方法。它对网格列表不起作用，但它不起作用这是一般情况下的工作（材料2之外），对吗？谢谢。我刚刚遇到了完全相同的问题。解释是有道理的。