Ответ 1
Январь 2017 Обновление:
Команда Angular 2 недавно добавила новый пакет NPM flex-layout только для макета. Это отдельный пакет, не зависящий от материала angular.
Полные инструкции доступны на странице github README.
Установите модуль:
npm install @ angular/flex-layout -save
В app.module.ts(или эквиваленте) объявите модуль:
import {FlexLayoutModule} from "@angular/flex-layout";
@NgModule({
imports: [
...
FlexLayoutModule
],
...
})
Пример разметки:
<div class="flex-container"
fxLayout="row"
fxLayout.xs="column"
fxLayoutAlign="center center"
fxLayoutAlign.xs="start">
<div class="flex-item" fxFlex="20%" fxFlex.xs="40%"> </div>
<div class="flex-item" fxFlex> </div>
<div class="flex-item" fxFlex="25px"> </div>
</div>
Вот пример plunker, взятый из страницы github flex-layout.
Оригинальный ответ:
docs, на которые вы ссылаетесь, относятся к материалу углового1. Angular2 материал по-прежнему не имеет директив компоновки.
Вы можете легко создать директиву себе простым способом.
Все, что вам нужно знать:
layout="row" совпадает с style="display:flex;flex-direction:row" layout="column" = > style="display:flex;flex-direction:column"
И flex равно style="flex:1"
В качестве директив:
@Directive({
selector:'[layout]'
})
export class LayoutDirective{
@Input() layout:string;
@HostBinding('style.display') display = 'flex';
@HostBinding('style.flex-direction')
get direction(){
return (this.layout === 'column') ? 'column':'row';
}
}
Директива flex, используйте его как: <div flex> или <div flex="10"> любое число от 0 до 100%. Кроме того, просто для удовольствия я добавил сокращение и увеличение входов
@Directive({
selector:'[flex]'
})
export class FlexDirective{
@Input() shrink:number = 1;
@Input() grow:number = 1;
@Input() flex:string;
@HostBinding('style.flex')
get style(){
return `${this.grow} ${this.shrink} ${this.flex === '' ? '0':this.flex}%`;
}
}
Чтобы использовать их везде, не добавляя их к каждому компоненту:
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent,FlexDirective ,LayoutDirective ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Вот пример в plunk