Динамическое раскрывающееся меню 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>

Кажется, он работает не так, как я ожидаю, как на странице облегченного дизайна материалов о меню, где, когда я нажимаю одно меню, другое закрывается. Что происходит, я могу открыть все выпадающие меню, но когда я пытаюсь закрыть одно, все они закрываются. Я думаю, что моя проблема заключается в <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)

---

РЕДАКТИРОВАТЬ

спасибо за шаблон... вот код поршня http://plnkr.co/edit/R6Bnadu124qOohjUWuMZ?p=preview

Answer 1

Вы все делаете правильно. В angular2-mdl есть ошибка: открытое меню не будет закрыто, если будет открыто другое меню (только что создано: https://github.com/mseemann/angular2-mdl/issues/200).

Обходной путь до тех пор, пока это не будет исправлено: зарегистрируйте прослушиватель события click для каждой кнопки, которая открывает меню:

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

запрос в компоненте вашего приложения для всех menuComponents:

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

и скрыть все меню, кроме того, которое будет открыто:

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

Вот plnkr с обходным решением: http://plnkr.co/edit/Yo7F1HKZSmVU309selTc?p=info