角度Flex布局 - 不工作

Question

我尝试在我的应用程序中使用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 {

} 

Answer 1

当我安装 lastedflex-layout模块时，我也遇到了类似的问题。问题是指令名称更改。在网站上，所有的指令都是这样layout，layout-xs，flex等...

根据我的解决方案，directive名称更改为 fx + PascalCase.

例子

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

如果您选中Layout 和 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>

Answer 2

我也遇到了这个问题，原因是我使用了多个模块，而我忘记FlexLayoutModule在我的“ PagesModule ”模块中导入。

它可以在主页面上工作，因为它是在顶级（AppModule）而不是在子模块上导入的。

将它导入“ PagesModule ”并重新启动开发服务器为我修复了它。