19

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

}
4

3 回答 3

13

当我安装 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>
于 2018-02-21T08:46:37.417 回答
8

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

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

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

于 2020-08-13T03:35:46.167 回答
2

这更像是一个普遍的问题，但偶尔会抓住我：

确保您的项目实际上正在编译！

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

不要被名字弄糊涂了

-使用fxLayout而不是fxFlexLayout

-使用fxLayoutAlign而不是fxFlexLayoutAlign

于 2019-01-10T06:19:11.863 回答