角度Flex布局 – 不工作

我尝试在我的应用程序中使用2.0.0-beta.9,一个简单的测试不起作用

<div fxLayout="row">
    <div>1. One</div> <div>2. Two</div> <div>3. Three</div> <div>4. Four</div>
</div>

显示列而不是行

我想我正在正确地导入库

import {Component,NgModule} from '@angular/core'
import {browserModule} from '@angular/platform-browser'

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

import {TestApp} from "./test-app";

@NgModule({
  imports: [ 
    browserModule,FlexLayoutModule
  ],declarations: [ TestApp ],bootstrap: [ TestApp ]
})
export class TestAppModule {

}

解决方法

当我安装持续的flex-layout模块时,我也遇到了这些问题.问题是指令名称的变化.
在 website中,所有指令都像layout,layout-xs,flex等…

根据我的解决方案,指令名称更改为fx PascalCase.

例

layout -> fxLayout
flex -> fxFlex
flex-order -> fxFlexOrder
flex-order-gt-md -> fxFlexOrder.gt-md

如果您查看Layout and Container,您将看到如下图像.

将以上源代码更改为以下内容,对我来说没问题.

<div fxLayout="row">
    <div fxFlex>First item in row</div>
    <div fxFlex>Second item in row</div>
</div>
<div fxLayout="column">
    <div fxFlex>First item in column</div>
    <div fxFlex>Second item in column</div>
</div>