[英]angular2-mdl dynamic drop-down menu
我正在使用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>
似乎它没有按我期望的那样在菜单的材质设计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)
编辑
感谢您的模板...这是插件代码http://plnkr.co/edit/R6Bnadu124qOohjUWuMZ?p=preview
您做对了所有事情。 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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.