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

Question

我正在使用Angular2材质网格列表组件 ，我想将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 网格列表组件的列表和列表项。 并没有解决方法。

Answer 2

您可以使用属性选择器和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 { }