是否可以在 Angular Material 中使用组件作为 mat-grid-tile？

Question

我正在学习将棱角材料用于现实生活中的应用程序，但现在我陷入了困境。

所以...我有一个路由localhost:4200/admin/home，它显然调用了关联的组件，在本例中为 AdminHomeComponent

AdminHomeComponent 是一个仪表板。需要明确的是，我不是在问如何构建仪表板。我正在寻找<mat-grid-list></mat-grid-list> 的特定方面。我对组件的想法是：仪表板的每个项目都是一个组件。所以...待办事项、任务、ecc。

我试着做这样的事情：

<mat-grid-list>
   <app-todo></app-todo>
   <app-tasks></app-tasks>
</mat-grid-list>

在我的概念中，组件完全可以自定义他的列和行。

但这不起作用！

否则，这反而有效（但对我来说有点无意义）：

<mat-grid-list ...>

  <mat-grid-tile>
    <mat-card class="dashboard-card">
            <mat-card-content class="dashboard-card-content">
                    <app-todo></app-todo>
           </mat-card-content>
   </mat-card>

  </mat-grid-tile>

  (... another tiles)

</mat-grid-list>

有一些方法可以使用<mat-grid-list>，其中每个<mat-grid-tile> 都是一个特定的组件（作为我的第一次尝试）？

组件正确呈现，但在<mat-grid-list> 和<mat-grid-tile> 之间有一个<div> 和<app-todo> 子代，它是什么不可见，所以我很确定问题出在严格的css 规则上。

Answer 1

Juninho，mat-grid-list 需要 mat-grid-tile，但是你可以使用任何东西作为 mat-grid-tile 的内容

<mat-grid-list>
   <mat-grid-tile>
     <app-todo></app-todo>
   </mat-grid-tile>
   <mat-grid-tile>
      <app-tasks></app-tasks>
   </mat-grid-tile>
</mat-grid-list>

一个simple stackblitz