angular2-mdl動的ドロップダウンメニュー

Question

私はangular2を使ってアプリケーションを開発しています。現在、私はどのように動的なドロップダウンメニューを使用してangular2-mdlを作成しようとしていますが、私はそれのための正しい解決策を見つけることができないようです。ここに私のプロジェクトからのコードスニペットは

<nav class="mdl-navigation mdl-layout--large-screen-only"> 

    <ng-container *ngFor="let link of links; let i = index"> 

    <ng-container *ngIf="!link.hasSubLinks()"> 

     <button mdl-button class="mdl-navigation__link" (click)="route(link.url)" [routerLink]="link.url" routerLinkActive="active"> 
     {{link.name}} 
     </button> 

    </ng-container> 

    <ng-container *ngIf="link.hasSubLinks()"> 

     <button mdl-button class="mdl-navigation__link" #{{link.name}}="mdlButton" [mdl-toggle-menu]="submenu"> 
     {{link.name}} 
     </button> 

     <mdl-menu #submenu="mdlMenu" mdl-menu-position="bottom-right" class="mdl-color--blue-grey-800"> 

     <mdl-menu-item *ngFor="let subLink of link.subLinks"> 
      <a class="mdl-navigation__link" [routerLink]="subLink.url" routerLinkActive="active"> 

     <mdl-icon mdl-list-item-icon [mdl-badge]="subLink.badge>0?subLink.badge:null" mdl-badge-overlap role="presentation" class="colorwhite">{{subLink.icon}}</mdl-icon>{{subLink.name}} 

      </a> 

     </mdl-menu-item> 

     </mdl-menu> 

    </ng-container> 

    </ng-container> 

</nav> 

であるそれは、そのiが1つのメニューに他の閉じをクリックして、私はそれがmenuに関する材料設計liteのページでようであることを期待する方法を、動作していないようです。私はすべてのドロップダウンメニューを開くことができますが、閉じようとするとすべて閉じます。私の問題は<button ... [mdl-toggle-menu]="submenu">で、<mdl-menu #submenu="mdlMenu" ... >には動的に値を設定する方法があると思いますか？

値を<button ... [mdl-toggle-menu]="link.icon">と<mdl-menu #{{link.icon}}="mdlMenu" ... >に変更しようとしましたが、エラーが発生します。何か案は？

error_handler.js:54 TypeError: this.menu.toggle is not a function 
at MdlToggleMenuDirective.onClick (mdl-toggle-menu.directive.js:11) 
at _View_AppComponent3._handle_click_2_2 (component.ngfactory.js:1162) 
at view.js:375 
at dom_renderer.js:262 
at dom_events.js:30 
at ZoneDelegate.invoke (zone.js:232) 
at Object.onInvoke (ng_zone.js:238) 
at ZoneDelegate.invoke (zone.js:231) 
at Zone.runGuarded (zone.js:128) 
at NgZone.runGuarded (ng_zone.js:133) 

---

EDITテンプレートの

おかげで...ここにあなたが右のすべてをやっているplunkerコードhttp://plnkr.co/edit/R6Bnadu124qOohjUWuMZ?p=preview

Answer 1

です。 angular2-mdlにはバグがあります。別のメニューが開かれていると、開いているメニューは閉じられません（作成されたのはちょうど：https://github.com/mseemann/angular2-mdl/issues/200）。

はこの時までこの問題を回避するには、固定されている：

@ViewChildren(MdlMenuComponent) private menuComponents: QueryList<MdlMenuComponent>; 

と非表示：すべてのmenuComponentsのためのアプリのコンポーネントに

<button mdl-button (click)="hideAllExcept(submenu)" class="mdl-navigation__link" #{{link.name}}="mdlButton" [mdl-toggle-menu]="submenu">{{link.name}}</button> 

クエリ：メニューを開き、すべてのボタンのクリックイベントリスナーを登録 開いているメニュー以外のすべてのメニュー：

hideAllExcept(submenu) { 
    this.menuComponents.forEach((menu) => { 
    if (submenu !== menu) { 
     menu.hide(); 
    } 
    }); 
    } 

回避策のあるplnkrを以下に示します。http://plnkr.co/edit/Yo7F1HKZSmVU309selTc?p=info