如何关闭隐藏的 Angular Material 类的 flex 布局

Posted 2023-03-06

【中文标题】如何关闭隐藏的 Angular Material 类的 flex 布局

【英文标题】：How do I turn off flex layout for a hidden Angular Material class

【发布时间】：2017-12-28 11:14:45

【问题描述】：

在 Angular cli 开发环境中，我在名为 layout-grid.component.html 的文件中创建了一个带有单个图块的网格列表组件：

<md-grid-list cols="4" rowHeight="100px">
  <md-grid-tile
      *ngFor="let tile of tiles"
      [colspan]="tile.cols"
      [rowspan]="tile.rows"
      [style.background]="tile.color">
    <app-splash></app-splash>
  </md-grid-tile>
</md-grid-list>

网格图块中嵌入了一个名为 app-splash 的组件，其中包含单个图像：

<img src="../assets/horse.jpg" >

当我运行网络应用程序时，我看到图像位于图块的中间，但边缘有一个间隙。我希望 img 填充瓷砖。将检查器与 Chrome 一起使用，我发现罪魁祸首是隐藏的类：

.mat-grid-tile .mat-figure 
  align-items:center;
  bottom:0;
  display:flex;
  height:100%;
  justify-content:center;
  left:0;
  margin:0;
  padding:0;
  position:absolute;
  right:0;
  top:0;

如果我关闭 display: flex 属性，我会得到我需要的结果。如何在我的代码中关闭它？将网格列表组件的 css 设置为内联没有任何作用。我需要更改打字稿吗？ layout-grid.component.ts 如下：

import  Component, OnInit  from '@angular/core';

@Component(
  selector: 'app-layout-grid',
  templateUrl: './layout-grid.component.html',
  styleUrls: ['./layout-grid.component.css']
)
export class LayoutGridComponent implements OnInit 

  tiles = [
    text: 'One', cols: 4, rows: 10, color: 'lightblue',
  ];

  constructor()  

  ngOnInit() 
  

【参考方案1】：

在 /layout-grid.componet.css 中添加：

::ng-deep md-grid-tile.mat-grid-tile .mat-figure 
  display: block !important; /* or whichever you need */

这将覆盖角度材质 css 中的那个。

【讨论】：

似乎 Angular 不太喜欢组件中的组件？我在摆脱网格结构方面取得了一些成功。

我面临同样的问题（尝试了上述答案以及 md-grid-title 上的单独课程，没有任何帮助）。但我无法从这个线程中找出解决方案，因为讨论开始聊天（给出 404）。 @Davtho1983：你能更新一下修复方法吗？它是否脱离了网格:(？

放 ::ng-deep .mat-grid-tile .mat-figure