Angular 2材质devise组件支持布局指令吗？

我正在尝试使用Angular2 Material Design组件，而我无法获得任何布局指令 。 例：

根据例子，这应该“只是工作”： 

<div layout="row"> <div flex>First item in row</div> <div flex>Second item in row</div> </div> <div layout="column"> <div flex>First item in column</div> <div flex>Second item in column</div> </div>

但事实并非如此 – 它只是将页面上的元素渲染为普通的旧div。 （我正在使用最新版本的Chrome）。

我是否错过了一些东西，比如说我应该导入一个CSS文件？

2017年1月更新 ：

Angular 2团队最近添加了一个新的NPM软件包flex- layout仅用于布局。 它是独立于angular材料的独立包装。
完整的说明可在github页面 README中find。

安装模块：

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>

这里是从flex-layout github页面获取的一个plunker样例 。

原始答案 ：

您所指的文档是针对angular1材质的。 Angular2材质仍然没有任何布局指示。

您可以通过简单的方式轻松地创build指令。

所有你必须知道的：

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

这是一个普拉克的例子

直到Material2为我们提供LayoutModule，才需要编写新的指令。

你只需要从angular1中导入angular layouts-attributes.css。 它把旧的指令作为CSSselect器。

要求（ 'node_modules /angular材料/模块/布局/angularmaterial.layouts-attributes.css'）

例如css的指令layout-align =“end”它使用cssselect器：[layout-align =“end”]

另一种select是使用angular2聚合物来拉动聚合物的铁弯曲布局 。 它稍微有一点限制，并且与材料1布局略有不同（但材料2布局也会有不同的API）。 但它现在起作用并得到支持。

这里也有一个指南。

Interesting Posts