Question

我在angular 5 app中使用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工具栏中的flexLayout <mat-toolbar>

1 个答案: