Angular 工具栏<mat-toolbar> 中的 flexLayout

Question

我在 angular 5 应用程序中使用 flexLayout。这是下面的代码。如您所见，我想在 mat-toolbar 和按钮中使用 flex 布局。但我没有得到想要的输出。请查看下面附上的屏幕截图了解结果。

<mat-toolbar color="primary">
  <div fxLayout="row">
    <div fxFlex="25%">
        <button mat-raised-button color="primary">
            <b>Home</b>
          </button>
    </div>
    <div fxFlex="25%">
        <button mat-button>
            <mat-icon svgIcon="navigation:ic_menu_24px"></mat-icon>
          </button>
    </div>
    <h1 fxFlex="25%">Dashboard</h1>
    <div fxFlex="25%">
        <button mat-raised-button color="primary">
            <b>Add App</b>
          </button>
    </div>
  </div>
</mat-toolbar>

这是它的样子

编辑：包括 app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { AppMaterialModule } from './app-material.module';
import { FlexLayoutModule } from '@angular/flex-layout';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToolbarComponent } from './toolbar/toolbar.component';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    ToolbarComponent
  ],
  imports: [
    BrowserModule,    
    AppMaterialModule,
    FlexLayoutModule,
    BrowserAnimationsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

请帮忙

谢谢

Answer 1

如果您添加 mat-toolbar-row 而不是 div，它会起作用

  <mat-toolbar color="primary">
      <mat-toolbar-row>
        <div fxFlex="25%">
            <button mat-raised-button color="primary">
                <b>Home</b>
              </button>
        </div>
        <div fxFlex="25%">
            <button mat-button>
                <mat-icon svgIcon="navigation:ic_menu_24px"></mat-icon>
              </button>
        </div>
        <h1 fxFlex="25%">Dashboard</h1>
        <div fxFlex="25%">
            <button mat-raised-button color="primary">
                <b>Add App</b>
              </button>
        </div>
     </mat-toolbar-row>
    </mat-toolbar>

Angular 工具栏<mat-toolbar> 中的 flexLayout

flexLayout in Angular Toolbar<mat-toolbar>

material-design

angular-flex-layout

angular