web-dev-qa-db-fra.com

La mise en page Flex ne fonctionne pas sur l'angle 5

J'essaie d'utiliser flex-layout sur angular 5 mais cela ne fonctionne pas.

C'est mon environnement:

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.6.1
Node: 9.3.0
OS: darwin x64
Angular: 5.1.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.0.3
@angular/cli: 1.6.1
@angular/flex-layout: 2.0.0-beta.12-67e4bf5
@angular/material: 5.0.3
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.1
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
TypeScript: 2.4.2
webpack: 3.10.0

Voici l'importation dans app.module.ts:

import {FlexLayoutModule} from "@angular/flex-layout";


@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialModule,
    SocialLoginModule,
    FlexLayoutModule
  ],

Aucune erreur sur la compilation.

Ceci est un test sur un modèle:

<div class="container"
     fxLayout
     fxLayout.xs="column"
     fxLayoutAlign="center"
     fxLayoutGap="10px"
     fxLayoutGap.xs="0">
  <div class="item item-1" fxFlex="15%">Item 1</div>
  <div class="item item-2" fxFlex="20%" fxFlexOrder="3">Item 2</div>
  <div class="item item-3" fxFlex>Item 3</div>
</div>

<div class="container"
     fxLayout
     fxLayout.xs="column"
     fxLayoutAlign="center"
     fxLayoutGap="10px"
     fxLayoutGap.xs="0">
  <div class="item item-4" fxFlex fxFlexOffset="50px"  fxFlexOffset.xs="0">Item 4</div>
  <div class="item item-5" fxFlex="200px">Item 5</div>
</div>

C'est le résultat (pas ce qui est attendu):

 enter image description here

angularangular-flex-layout
6
Kerby82

Vous devez importer FlexLayoutModule dans chaque module de fonctionnalité. Ce n'est pas la meilleure solution, mais une solution efficace.

Importer/exporter FlexLayoutModule dans le SharedModule fonctionne comme un charme. C'est la meilleure solution qui respecte le guide de style angulaire, en ce qui concerne l'importation du SharedModule dans chaque module de fonction.

Pour plus d'informations sur le SharedModule: https://angular.io/guide/styleguide#shared-feature-module

18
Mehdi Benmoha

Ajoutez ce qui suit au fichier package.json:

"@angular/flex-layout": "^6.0.0-beta.15",
"rxjs": "^6.1.0",
"@angular/cdk": "^6.0.0",
"rxjs-compat": "6.0.0-beta.1",

et courir

npm install
1
Iron shield