Flex布局不适用于角度5

发布时间：2020-12-15 02:10:51 所属栏目：百科来源：网络整理

导读：我正在尝试在角度5上使用flex-layout但它不起作用. 这是我的环境： _ _ ____ _ ___ / _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ | '_ / _` | | | | |/ _` | '__| | | | | | | / ___ | | | | (_| | |_| | | (_| | | | |___| |___ | |/_/ __|

我正在尝试在角度5上使用flex-layout但它不起作用.

这是我的环境：

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

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

这是app.module.ts中的导入：

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


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

编译时没有错误.

这是对模板的测试：

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

这是结果(不是预期的)：

解决方法

您必须在每个功能模块中导入FlexLayoutModule.这不是最好的解决方案,而是一个有效的解决方案.

在SharedModule中导入/导出FlexLayoutModule就像魅力一样,是尊重角度样式指南的最佳解决方案,通过在每个要素模块中导入SharedModule的方式.

有关SharedModule：https://angular.io/guide/styleguide#shared-feature-module的更多信息

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!