Angular 2 Material Design 组件是否支持布局指令？答案

【问题标题】：Are Layout Directives supported by Angular 2 Material Design Components?Angular 2 Material Design 组件是否支持布局指令？
【发布时间】：2016-09-11 16:53:47
【问题描述】：

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

【问题讨论】：

他们的文档的第一行有关于如何在使用 SystemJS 时导入它的说明。您是否使用开发者工具看到了对 CSS 的请求？
我已经让组件正常工作（例如 Button - 我确实为此更新了我的 SystemJs 配置文件），但布局不起作用。我没有看到任何对任何材料设计 css 的要求。

标签： angular flexbox material-design

【解决方案1】：

2017 年 1 月更新：

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

这是来自 flex-layout github 页面的plunker sample。

原答案：

您所指的docs 是针对angular1 材质的。 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中的示例

【讨论】：

作为一个刚接触材料库的人，这让我摸不着头脑......很难判断哪些指令仅是 NG2。
forRoot 在该模块上不再存在...github.com/angular/flex-layout/wiki/…

【解决方案2】：

在 Material2 为我们提供 LayoutModule 之前，无需编写新指令。

您只需从 angular1 导入 angular layouts-attributes.css。它将旧指令作为 css 选择器。

require('node_modules/angular-material/modules/layouts/angular-material.layouts-attributes.css')

例如指令 layout-align="end" 的 css 它使用 css 选择器：[layout-align="end"]

【讨论】：

【解决方案3】：

另一种选择是使用angular2-polymer 来拉入Polymer 的iron-flex-layout。与 Material 1 布局相比，它的限制稍多，API 略有不同（但 Material 2 布局也有不同的 API）。但它现在可以工作并且受支持。

还有一个指南here。

【讨论】：