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

当我安装持续的flex-layout模块时，我也遇到了这些问题。问题是指令名称更改。 在website中，所有指令都是layout，layout-xs，flex等......

根据我的解决方案，directive名称已更改为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>

Answer 2

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

它可以在主页上使用，因为它是在顶层（ AppModule ）上导入的，而不是在子模块上导入的。

将其导入“ PagesModule ”中，然后重新启动开发服务器，为我修复了该问题。

Answer 3

在前2次导入后，您可能忘记了分号。

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

Answer 4

这更多是一个通用问题，但偶尔会引起我注意：

确保您的项目正在编译！

如果遇到错误并且项目无法编译，则不会显示HTML更改-包括添加的指令。因此，如果您在现有代码中添加指令，但看不到更改，请确保编译完成。

不要混淆名字

-使用fxLayout而不是fxFlexLayout

-使用fxLayoutAlign而不是fxFlexLayoutAlign