在单独的组件中拆分Angular Material网格列表组件的`list`和`item`？

Question

我正在使用Angular2 Material 网格列表组件,我想拆分list和item单独的组件.

这是我的list:

@Component({
  selector: 'app-list',
  template: `
    <md-grid-list cols="12">
        <app-item *ngFor="let item of items"></app-item>
    </md-grid-list>
  `
})
export class ListComponent {
  items: Array<number> = [1, 2]; // dummy data
}

这是我的item组件:

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

问题是子item组件在包装器<app-item>自定义(无效)DOM元素内的实际DOM中呈现.由于Angular2 Material 网格列表组件需要以下结构,因此样式被破坏:

<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-content,DynamicComponentLoader的ViewContainerRef,但他们似乎并不至于我可以看到提供一个解决的办法.

我在这里阅读了响应,但属性选择器对我来说也不起作用.如果包装组件不要紧<app-item>或<div>或<span>或什么的,造型老是打断.

有没有人知道我是否可以在没有任何父包装的情况下渲染子组件？是否有针对我的用例建议的解决方法？

Answer 1

@sergeras,你提出的解决方案不起作用.

我对使用属性选择器并<ng-container>导致错误的方法感到非常惊讶,并且我在Angular Material 2官方存储库中引发了一个问题.

角质材料2的主要贡献者之一Jeremy Elbourn提供了一个解释:

...您可以将网格列表视为具有特定API 的单个UI组件.将网格图块放置在另一个组件内部会将它们完全隐藏在网格列表中,因为每个组件实际上都是一个黑盒子.

因此,我的问题的答案是:目前无法在不同的Angular 2组件中分离Angular2 Material 网格列表组件的列表和列表项.并没有解决方法.