☰

Angular Flex レイアウト - 動作しない 質問する

tag-icon • tag-icon angular angular-flex-layout
Angular 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 {

}

ベストアンサー1

私も最新のflex-layoutモジュールをインストールしたときに同じような問題が発生しました。問題は指令名前の変更。Webサイト、すべてのディレクティブはlayout、、layout-xsなどのようになりますflex...

私の解決策によれば、directive名前は に変更されますfx + PascalCase。

例

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

チェックするとレイアウトとコンテナすると、下の画像のようになります。

ここに画像の説明を入力してください

上記のソースコードを以下のように変更すれば問題ありません。

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

おすすめ記事