角度Flex布局 – 不工作

发布时间：2020-12-15 02:13:45 所属栏目：百科来源：网络整理

导读：我尝试在我的应用程序中使用2.0.0-beta.9,一个简单的测试不起作用 div fxLayout="row" div1. One/div div2. Two/div div3. Three/div div4. Four/div/div 显示列而不是行我想我正在正确地导入库 import {Component,NgModule} from '@angular/core'import {B

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!