我正在尝试使用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文件吗?
答案 0 :(得分:122)
2017年1月更新:
Angular 2团队最近添加了一个新的NPM包flex-layout仅用于布局。它是一个独立于角材料的独立包装 完整说明可在github page自述文件中找到。
安装模块:
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 sample。
原始答案:
您指的docs适用于angular1素材。 Angular2材质仍然没有任何布局指令。
您可以通过简单的方式轻松创建指令。
您需要知道的所有内容:
layout="row"
与style="display:flex;flex-direction:row"
相同
layout="column"
=&gt; 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
中的示例答案 1 :(得分:3)
在Material2为我们提供LayoutModule之前,无需编写新指令。
您只需从angular1导入angular layouts-attributes.css。 它将旧指令作为css选择器。
要求( 'node_modules /角材料/模块/布局/角material.layouts-attributes.css')
例如css for directive layout-align =“end”它使用css 选择器:[layout-align =“end”]
答案 2 :(得分:1)
另一种选择是使用angular2-polymer来吸引Polymer的iron-flex-layout。它稍微有限,并且与Material 1布局略有不同(但是Material 2布局也将具有不同的API)。但它现在有效并得到支持。
还有一个指南here。