angular - Flex布局不适用于角度5

Question

我正在尝试在 angular 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>

这是结果（不是预期的）：

Answer 1

您必须在每个功能模块中导入 FlexLayoutModule。这不是最好的解决方案，而是一个可行的解决方案。

在 SharedModule 中导入和导出 FlexLayoutModule 就像魅力一样，是尊重角度风格指南的最佳解决方案，就像在每个功能模块中导入 SharedModule 一样。

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

编辑：如果您看不到它们之间的区别，我还写了一篇关于 SharedModule 与 CoreModule 的文章：https ://medium.com/@benmohamehdi/angular-best-practices-coremodule-vs-sharedmodule-25f6721aa2ef

Answer 2

将以下内容添加到 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",

并运行

npm install

Answer 3

从 npm 安装 Flex 布局：$ npm install @angular/flex-layout --save

或者使用 Yarn：$ yarn add @angular/flex-layout

现在在你的应用模块中导入 FlexLayoutModule

import { FlexLayoutModule } from "@angular/flex-layout";
@NgModule({
  imports: [
    BrowserModule,
    FlexLayoutModule
  ],
  // ...
})
export class AppModule {}

Flex Layout 现在可以在您的模板中使用了。