Angular 2 Material Design Components에서 Layout Directive를 지원합니까?

Angular 2 Material Design Components에서 Layout Directive를 지원합니까?

---

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 패키지 플렉스 레이아웃 을 추가했습니다 . 각진 재료와는 별개의 별도 패키지입니다.
전체 지침은 github 페이지 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 페이지에서 가져온 플 런커 샘플 입니다.

---

원래 답변 :

문서 당신이 언급하는이 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 의 샘플입니다.

---

No need to write a new directive until Material2 provide us the LayoutModule.

You just have to import the angular layouts-attributes.css from angular1. It takes the old directive as css selector.

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

for example the css for directive layout-align="end" it use the css selector: [layout-align="end"]

---

Another option is to use angular2-polymer in order to pull in Polymer's iron-flex-layout. It is slightly more limited and has a slightly different API than the Material 1 layout (but the Material 2 layout will also have a different API). But it works now and is supported.

There is also a guide here.

ReferenceURL : https://stackoverflow.com/questions/37244788/are-layout-directives-supported-by-angular-2-material-design-components