Angular/弹性布局不适用于 Angular 9

Question

我已经用 angular 9 、 angular material 和 angular/flex-layout 设置了一个基本项目。我怎么无法让 angular/flex-layout 工作。这是我所做的

登录-view.component.ts

<div class="container"  fxLayout="row" fxLayoutAlign="center center" >

  <mat-card class="login-box">
    <mat-card-title>Login</mat-card-title>
    <mat-card-content>
      <form #loginForm="ngForm" (ngSubmit)="login(loginForm)">
        <p>
          <mat-form-field>
            <input type="text" name="username" matInput placeholder="Username" ngModel required />
          </mat-form-field>
        </p>

        <p>
          <mat-form-field>
            <input type="password" name="password" matInput placeholder="Password" ngModel required />
          </mat-form-field>
        </p>
        <div class="button">
          <button type="submit" mat-button>Login</button>
        </div>
      </form>
    </mat-card-content>
  </mat-card>

</div>

登录-view.component.scss

mat-form-field{
    width: 100%;
}

.login-box{
    width : 30%;
}

.container {
//     display: flex;
//     align-items: center;
//     justify-content: center;
    height: 100%;
}

app.module.ts

import { reducers } from './ngrx/app-reducer';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material/material.module';
import { CoreModule } from './core/core.module';
import { State, StoreModule } from '@ngrx/store';
import { environment } from 'src/environments/environment';
import { StoreDevtoolsModule  } from '@ngrx/store-devtools';
import { EffectsModule } from '@ngrx/effects';
import { StoreRouterConnectingModule, RouterState } from '@ngrx/router-store';
import { metaReducers } from './ngrx/app-reducer'
import { AuthModule } from './features/auth/auth.module';
import { FlexLayoutModule } from '@angular/flex-layout';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [  
    CoreModule,
    AuthModule,
    AppRoutingModule,
    MaterialModule,
    BrowserModule,
    BrowserAnimationsModule,
    FlexLayoutModule,
    StoreModule.forRoot(
      reducers, { 
        metaReducers,
        runtimeChecks:{
          strictStateImmutability:true,
          strictActionImmutability: true,
          strictActionSerializability:true,
          strictStateSerializability: true
        } 
      }
    ),
    StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: environment.production }),
    // this is going to initialize the global services for ngrx and add them to the application
    EffectsModule.forRoot([]),
    StoreRouterConnectingModule.forRoot({
      stateKey: 'router',
      routerState:RouterState.Minimal
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这些是我安装的包

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.6
@angular-devkit/build-angular     0.900.6
@angular-devkit/build-optimizer   0.900.6
@angular-devkit/build-webpack     0.900.6
@angular-devkit/core              9.0.6
@angular-devkit/schematics        9.0.6
@angular/cdk                      9.1.2
@angular/flex-layout              9.0.0-beta.29
@angular/material                 9.1.2
@ngtools/webpack                  9.0.6
@schematics/angular               9.0.6
@schematics/update                0.900.6
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

每当我通过 css 将 flex 应用到“容器”类时，它就可以工作，但不能与 angular-flex-layout 一起使用。

Answer 1

尝试在声明登录 View 组件的模块中导入 FlexLayoutModule