我正在试着使用Angular2 Material Design个组件，但layout directives个组件我一个都不能用.示例:
根据例子，这应该"管用":
<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文件？
January 2017 Update:
Angular 2团队最近添加了一个新的NPM包flex-layout，仅用于布局.它是一个独立于角material 的独立包装
安装模块:
npm安装@angular/flex布局-保存
应用程序内.单元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布局github页面中选取的plunker sample.
Original Answer:
你所说的docs是针对1角material 的.Angular 2material 仍然没有任何布局指令.
您可以用一种简单的方式轻松创建指令.
你需要知道的是:
layout="row" is same as 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-<div flex>%之间的任意数字.此外，为了好玩，我添加了收缩和增长输入
@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英寸的样品