Materyal tasarım angular2/4 menüsü, açısal1 gibi iç içe açılan seçenekleri olan bir örnektir. Bu güzelliktir</p> <pre><code>https://material.angularjs.org/1.1.4/demo/menuBar </code></pre> <p>:

Question

Gerçekten angular2 malzemeyi dahil etmek istiyoruz

aşağıdaki menü örneği fark http://codepen.io/anon/pen/zrdQwP

Sana menüler iç içe geçmiş nasıl gibi ama Eğik 2/4 demo için Hepsini gör:

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

Yuvalanmış menülere örnek yok! Bu Angular2 + Malzeme ile mümkün mü? Eğer öyleyse, bunu nasıl kullanabileceğini gösterebilir mi? Yoksa bu mümkün değil mi? 2/4 Eğik bu destekleyemez eğer balık görünüyor Açısal 1.x ederken can ...

Answer 1

Güncelleme: Bu özellik 2.0.0-beta.10 découpage-panjandrum ilave edildi

Example

Önceki versiyon:

Gelecekte planlanan https://github.com/angular/material2/issues/1429

Ancak şimdi bunun mümkün olduğundan şüpheleniyorum. İşte benim böyle menü aşağıdaki gibi görünebilir

Template gösteren 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> 

Sen ürün tanımları beyan etmeleri gereken:

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