Angular Flex Layout - не работает

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 модуль. Проблема заключается в изменении названия директивы. На сайте все директивы похожи 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

Я тоже столкнулся с этой проблемой, потому что я использовал несколько модулей, и я забыл импортировать FlexLayoutModuleв моих модулях " PagesModule ".

Он будет работать на главной странице, потому что он был импортирован на верхнем уровне (AppModule), а не в дочерних модулях.

Импортировав его в " PagesModule " и перезапустив сервер разработки, я исправил это.

Answer 3

Это более общая проблема, но время от времени ловит меня:

Убедитесь, что ваш проект на самом деле компилируется!

Если у вас есть ошибка и проект не компилируется, то изменения HTML не будут показаны, включая добавляемые директивы. Поэтому, если вы добавляете директиву в существующий код и не видите изменений, убедитесь, что компиляция завершена.

Не путайся с именами

-Использование fxLayout и не fxFlexLayout

-Использование fxLayoutAlign и не fxFlexLayoutAlign

Answer 4

Вы, вероятно, забыли точки с запятой после первых двух импортов.

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