我正在尝试使用角度材料2创建一个导航栏，该材料在移动设备和平板电脑等小屏幕中折叠。我只能找到md-button而不是md-menu-bar，就像角度材料一样
以下是我在angular-cli应用程序中使用Angular2 Material 2和flex-layout构建响应式导航栏的方法。
原文链接：https://www.f2er.com/angularjs/143998.html(请访问Install Angular Material and Angular CDK)
1)安装flex-layout
npm install @angular/flex-layout -save
2)在app.module.ts中包含flex-layout
import {FlexLayoutModule} from "@angular/flex-layout";
3)进口
imports: [ BrowserModule,FormsModule,HttpModule,RoutingModule,FlexLayoutModule,MyOwnCustomMaterialModule // Please visit the link above "Install Angular Material and Angular CDK",and check (Step 3: Import the component modules). ],
app.component.html
<mat-toolbar color="primary">
<button mat-button routerLink="/">
<mat-icon>home</mat-icon>
{{title}}</button>
<!-- This fills the remaining space of the current row -->
<span class="fill-remaining-space"></span>
<div fxLayout="row" fxShow="false" fxShow.gt-sm>
<button mat-button routerLink="/products">Products</button>
<button mat-button routerLink="/dashboard">Dashboard</button>
</div>
<button mat-button [mat-menu-trigger-for]="menu" fxHide="false" fxHide.gt-sm>
<mat-icon>menu</mat-icon>
</button>
</mat-toolbar>
<mat-menu x-position="before" #menu="matMenu">
<button mat-menu-item routerLink="/products">Products</button>
<button mat-menu-item routerLink="/dashboard">Dashboard</button>
<!--<button mat-menu-item>Help</button>-->
</mat-menu>
app.component.css
.fill-remaining-space {
/*This fills the remaining space,by using flexBox.
Every toolbar row uses a flexBox row layout. */
flex: 1 1 auto;
}
注意：要测试，请调整页面大小。
看看flex-layout文档
