angular - Angular 2 Material Design 组件是否支持布局指令？

Question

我正在尝试使用 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 文件？

Answer 1

2017 年 1 月更新:

Angular 2 团队最近添加了一个新的 NPM 包 flex-layout仅用于布局。它是一个独立于 Angular Material 的独立包。
完整说明可在 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>

这是一个plunker sample取自 flex-layout github 页面。

---

原始答案:

docs你指的是 angular1 Material 。 Angular2 Material 仍然没有任何布局指令。

您可以通过一种简单的方式轻松地自己创建指令。

所有你需要知道的:

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 中的示例