Question

我正在使用Angular2材料grid list component，我希望将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材质grid list component需要以下结构，因此样式被破坏了：

<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，但就我所见，他们似乎没有为此提供解决方案。

我读了response here，但属性选择器对我也不起作用。如果包装组件是<app-item>或<div>或<span>或其他什么，则样式始终会中断。

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

Answer 1

@sergeras，the solution you proposed无法正常工作。

我很惊讶使用属性选择器和<ng-container>的方法导致Angular Material 2官方存储库中的错误和raised an issue。

Angular Material 2的主要贡献者之一Jeremy Elbourn提供了an explanation：

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

因此，我的问题的答案是：目前无法在不同的Angular 2组件中分隔Angular2材料grid list component的列表和列表项。并没有解决方法。

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 { }

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

2 个答案: