Question

我已经设置了一个基本项目，其中包含角度9，角度材料和角度/柔韧性布局。我怎么无法进行角度/柔韧性布局。这是我所做的

Login-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>

login-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应用于“容器”类而通过CSS使用flex时，它都可以工作，但不能与angular-flex-layout一起使用。

Answer 1

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

Answer 2

我认为启用常春藤时，Angular flexlayout无法正常工作。像下面一样将enableIvy设置为false。

"angularCompilerOptions": 
{ 
  "fullTemplateTypeCheck": true, 
  "strictInjectionParameters": true, 
  "enableIvy": false 
}

Answer 3

我建议您转到文件tsconfig.app.json并将 enableIvy 设置为false：

"angularCompilerOptions": {
    "enableIvy": false
  }

对我有用。

Answer 4

对于

"@angular/animations": "~9.1.0",
"@angular/cdk": "^9.2.0",
"@angular/common": "~9.1.0",
"@angular/compiler": "~9.1.0",
"@angular/core": "~9.1.0",
"@angular/flex-layout": "^9.0.0-beta.31",
"@angular/forms": "~9.1.0",
"@angular/material": "^9.2.0",
"@angular/platform-browser": "~9.1.0",
"@angular/platform-browser-dynamic": "~9.1.0",
"@angular/router": "~9.1.0",

对我有用的完整解决方案是@nabel和@ dev0201建议的组合 | @ Dev2601给了，是

添加import { FlexLayoutModule } from '@angular/flex-layout'并将其包含在声明组件的@NgModule的imports部分中。
将"angularCompilerOptions": { "enableIvy": false }添加到tsconfig.app.json文件中。

应该是这样。

角度/弯曲布局不适用于角度9

4 个答案: