我正在開發一個使用angular2的應用程序。目前我正試圖找出如何使用angular2-mdl製作動態下拉菜單,但我似乎無法找到正確的解決方案。這裏是從我的項目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>
的代碼片段看來它不工作我希望它像在材料設計精簡版頁關於menu,在那裏當我點擊一個菜單中的另一個關閉的方式。會發生什麼是我可以打開所有下拉菜單,但是當我嘗試關閉一個時,所有關閉。我認爲我的問題是<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)
編輯
感謝模板...這裏是plunker代碼http://plnkr.co/edit/R6Bnadu124qOohjUWuMZ?p=preview
你可以創建一個最小的plnkr,我們可以用來找出你的問題。這裏是angular2-mdl的模板:http://plnkr.co/edit/I3dLfLUDIH2xlEJqj0da?p=preview – michael