Ví dụ về menu thiết kế material design angular2/4 với các tùy chọn thả xuống lồng nhau như angular1 là gì?

Question

Tôi thực sự muốn kết hợp angular2 vật chất, nhận thấy ví dụ menu bên dưới:

https://material.angularjs.org/1.1.4/demo/menuBar 

Đây là một vẻ đẹp: http://codepen.io/anon/pen/zrdQwP

Tôi thích cách bạn có thể đã lồng menu, nhưng đối với 2/4 bản demo kiễu góc , tất cả những gì bạn thấy là:

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

Không có ví dụ với menu lồng nhau! Điều này có thể thực hiện với Angular2 + Material không? Nếu vậy, ai đó có thể chứng minh làm thế nào để sử dụng điều này? Hay điều này là không thể? Có vẻ tanh nếu góc 2/4 không thể hỗ trợ này trong khi 1.x góc có thể ...

Answer 1

Cập nhật:

Tính năng này đã được bổ sung trong 2.0.0-beta.10 DECOUPAGE-nhân vật quan trọng

Example

phiên bản trước:

Dự kiến ​​trong tương lai https://github.com/angular/material2/issues/1429

Nhưng bây giờ tôi nghi ngờ điều đó là có thể. Đây là tôi Plunker Material2 Menu Example thể hiện trình đơn như

Template có thể trông như thế này:

<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> 

Bạn chỉ cần khai báo mục định nghĩa:

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