我正在使用flex-layout进行垫式步进器。每个步骤都包含一个图标和一个段落,以使其具有责任感和可读性,我想在较小的屏幕上隐藏段落,仅保留图标。根据我的理解,如果分辨率低于小值,fxHide.lt-sm应该隐藏element,但是不幸的是什么也没有发生,它看起来像这样: Image of stepper (Galaxy S5 size)
代码如下:
<mat-horizontal-stepper>
<mat-step>
<ng-template matStepLabel>
<ul>
<li>
<mat-icon>format_list_numbered</mat-icon>
</li>
<li fxHide.lt-sm>
<p>Grades</p>
</li>
</ul>
</ng-template>
<app-grades></app-grades>
</mat-step>
<mat-step label="Student">
<ng-template matStepLabel>
<ul>
<li>
<mat-icon>account_circle</mat-icon>
</li>
<li fxHide.lt-sm>
<p>Student</p>
</li>
</ul>
</ng-template>
<app-user></app-user>
</mat-step>
<mat-step label="Teachers">
<ng-template matStepLabel>
<ul>
<li>
<mat-icon>people</mat-icon>
</li>
<li fxHide.lt-sm>
<p>Teachers</p>
</li>
</ul>
</ng-template>
<app-teachers></app-teachers>
</mat-step>
<mat-step label="Messages">
<ng-template matStepLabel>
<ul>
<li>
<mat-icon>message</mat-icon>
</li>
<li fxHide.lt-sm>
<p>Messages</p>
</li>
</ul>
</ng-template>
<app-messages></app-messages>
</mat-step>
</mat-horizontal-stepper>
FxLayoutModule包含在app.module.ts的导入中
答案 0 :(得分:2)
FlexLayoutModule必须导入所有希望使用它的模块中
import { FlexLayoutModule } from '@angular/flex-layout';
@NgModule({
imports: [
FlexLayoutModule,
]
})
export class MyModule { }