父mat-grid-list中的新mat-grid-list不起作用

时间:2018-08-16 12:57:17

标签: angular grid angular-material-6

我正在尝试将mat-grid-list放入 PARENT mat-grid-list中。

下面是代码-

<mat-grid-list cols="12" rowHeight="2:1" gutterSize=2px>

<mat-grid-tile colspan="12" rowspan="1"  [style.background-color]="'brown'">
 LOGO
</mat-grid-tile>
<mat-grid-tile colspan="1" rowspan="16"  [style.background-color]="'brown'">
 Navigation
</mat-grid-tile>
<mat-grid-tile colspan="8" rowspan="16">
**<app-child-content></app-child-content>** New Component includes mat-grid
</mat-grid-tile>
<mat-grid-tile colspan="3" rowspan="16"  [style.background-color]="'brown'">
 Trending
</mat-grid-tile>

</mat-grid-list>

应用子组件的内容-

<mat-grid-list cols="1" rowHeight="1" gutterSize=2px>

<mat-grid-tile colspan="1" rowspan="1"  [style.background-color]="'brown'">
  Child Grid list Not Working
</mat-grid-tile>
</mat-grid-list

1 个答案:

答案 0 :(得分:0)

解决了这个问题,但仍有很多要学习的内容-为子组件提供100%的高度和100%的宽度属性。

<app-child-content class="child-css"></app-child-content>
.child-css{
 width: 100%;
 height: 100%;
 }