angular1과 같이 중첩 된 드롭 다운 옵션이있는 머티리얼 디자인 angular2/4 메뉴의 예는 무엇입니까? 이것은 아름다움</p> <pre><code>https://material.angularjs.org/1.1.4/demo/menuBar </code></pre> <p>:

Question

정말 angular2 자료를 통합 할

다음 메뉴의 예를 발견 http://codepen.io/anon/pen/zrdQwP

난 당신이 메뉴를 중첩 한 방법 등이 있지만, 각도 2/4 데모 당신이 보시는 것은 다음과 같습니다 :

https://material.angular.io/components/component/menu 

중첩 된 메뉴의 예는 없습니다! Angular2 + Material을 사용할 수 있습니까? 그렇다면 누군가이 사용 방법을 시연 할 수 있습니까? 아니면 그냥 가능하지 않나요? 2/4 각도가이 기능을 지원 할 수없는 경우 비린내가 보인다 각도 1.x에서 동안 할 수 ...

Answer 1

업데이트 :이 기능은 2.0.0-beta.10 데쿠 파주 - 나리에서 추가되었다

Example

이전 버전 :

,

향후 예정입니다 https://github.com/angular/material2/issues/1429

하지만 지금은 가능하다고 생각합니다. 여기 내 같은 메뉴를 다음과 같을 수

템플릿을 보여 Plunker Material2 Menu Example :

<ng-container *ngFor="let item of items"> 
    <button md-button [mdMenuTriggerFor]="menu" #trigger="mdMenuTrigger" [attr.data-level]="1" (mouseenter)="openMenu(trigger, 1)"> 
    {{item.text}} 
    </button> 
    <md-menu class="custom-menu" #menu="mdMenu" [overlapTrigger]="false" (close)="closeMenu()" xPosition="after"> 
    <ng-container *ngTemplateOutlet="subMenu; context: { $implicit: item.items, level: 2 }"></ng-container> 
    </md-menu> 
</ng-container> 

<ng-template #subMenu let-items let-level="level"> 
    <ng-container *ngFor="let item of items"> 
    <ng-container *ngIf="item.items && item.items.length else simpleTmpl"> 
     <button *ngIf="!item.divider" md-menu-item [disabled]="item.disabled" 
       [mdMenuTriggerFor]="menu" 
       #trigger="mdMenuTrigger" 
       [attr.data-level]="level" 
       (mouseenter)="openMenu(trigger, level);" (click)="$event.stopPropagation()"> 
     <span>{{item.text}}</span> 
     <span *ngIf="item.extraText">{{item.extraText}}</span> 
     <md-icon *ngIf="item.icon">{{item.icon}}</md-icon> 
     </button> 
     <md-menu class="sub-menu" #menu="mdMenu" [overlapTrigger]="false" xPosition="before" > 
     <ng-container *ngTemplateOutlet="subMenu; context: { $implicit: item.items || [], level: level + 1 }"></ng-container> 
     </md-menu> 
     <md-divider *ngIf="item.divider" class="mat-divider"></md-divider> 
    </ng-container> 
    <ng-template #simpleTmpl> 
     <button *ngIf="!item.divider" md-menu-item [disabled]="item.disabled" (click)="closeMenu()"> 
     <span>{{item.text}}</span> 
     <span *ngIf="item.extraText">{{item.extraText}}</span> 
     </button> 
     <md-divider *ngIf="item.divider" class="mat-divider"></md-divider> 
    </ng-template> 
    </ng-container> 
</ng-template> 

당신은 항목의 정의를 선언하기 만하면됩니다 :

menuItems = [ 
    { 
    text: 'File', 
    items: [ 
     { 
     text: 'Share' 
     }, 
     { 
     text: 'New', 
     icon: 'arrow_right', 
     items: [ 
      { 
      text: 'Document' 
      }, 
      { 
      text: 'Form' 
      } 
     ] 
     }, 
     { 
     text: 'Print', 
     extraText: 'Ctrl+P' 
     } 
    ] 
    }, 
    { 
    text: 'Edit', 
    } 
];