Question

我正在使用materialize插件学习Angular2。我正在创建一个具有多个下拉菜单的动态物化侧面导航menulist，我可以看到创建的菜单但是可折叠功能不起作用。嵌套菜单级别只是第一级。我附上了截图如下 -

我正在尝试 - 我有一个动态水平菜单栏，例如HOME，CONFIGURATION，MASTER等，根据REST调用的登录用户配置文件获取。每个水平菜单还具有使用水平菜单作为父菜单id从另一个REST调用获取的子菜单。我使用的子菜单的最大嵌套级别只有一个或没有，即直接链接（＆amp;它不会改变），即当我点击说..CONFIGURATION它有USER SETTINGS＆amp;它的嵌套菜单，SYSTEM SETTINGS＆amp;它的嵌套菜单或直接链接与其各自的[routerLink]导航到各自的页面。

面临的问题 - 如果每个水平父菜单都正确显示，我可以看到显示带有下拉列表的子菜单，但是当我点击它时，下拉列表不会展开。此外，如果我使用firebug＆amp; amp复制创建的html结构将它直接粘贴在html中就可以了。我想我没有正确初始化可折叠。

html代码段如下 -

<ul id="slide-out" class="side-nav">
    <span *ngFor="let menu of subMenus">
        <li *ngIf='menu.menuPathName != ""'>
            <a [routerLink]="[menu.menuPathName]">{{menu.menuName}}</a> 
        </li>   
        <li *ngIf="menu.subMenus.length > 0" class="no-padding">
            <ul *ngIf="menu.subMenus.length > 0" class="collapsible collapsible-accordion">
                <li>
                    <a class="collapsible-header" data-activates='{{menu.menuCode}}'>{{menu.menuName}}<i class="material-icons">arrow_drop_down</i></a>
                    <div class="collapsible-body">
                        <ul id='{{menu.menuCode}}'>
                            <li *ngFor="let childMenu of menu.subMenus">
                                <a href="#" [routerLink]="[childMenu.menuPathName]">{{childMenu.menuName}}</a>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>   
        </li>
    </span>
</ul>
<script>
//$(".button-collapse").sideNav();
//$('.collapsible').collapsible();
  $(document).ready(function() {
      $('.collapsible').collapsible();
  });
</script>

组件代码 -

import { Component, OnInit } from '@angular/core';
import { MenuService } from '../../service/menu.service';
import { Menu } from '../../model/menu';

@Component({
    selector: 'app-side-menu',
    templateUrl: './side-menu.component.html',
    styleUrls: ['./side-menu.component.css'],
})
export class SideMenuComponent implements OnInit{
    private subMenus: Menu[];
    private menu: Menu;
    constructor(private menuService: MenuService) {
        this.menuService
            .getParentMenu()
            .subscribe(menu => {
            //console.log("SideMenuComponent "+menu.menuCode);
            this.menuService.getSubMenus(menu.menuCode).subscribe(menus => this.subMenus = menus);
        });  
    }

    ngOnInit() {
        //console.log("SideMenuComponent ngOnInit");
    }
}

需要帮助解决这个问题......我被困住了不能继续...

Answer 1

我通过更改html和添加解决了这个问题 （click）=“toggleMenu（menu.menuCode）” -

<span *ngFor="let menu of subMenus">
        <li *ngIf='menu.menuPathName != ""'>
            <a [routerLink]="[menu.menuPathName]">{{menu.menuName}}</a> 
        </li>   
        <li *ngIf="menu.subMenus.length > 0" class="no-padding">
            <ul *ngIf="menu.subMenus.length > 0" class="collapsible collapsible-accordion">
                <li (click)="toggleMenu(menu.menuCode);">
                    <a class="collapsible-header">{{menu.menuName}}<i class="material-icons">arrow_drop_down</i></a>
                    <div class="collapsible-body">
                        <ul>
                            <li *ngFor="let childMenu of menu.subMenus">
                                <a href="#" [routerLink]="[childMenu.menuPathName]">{{childMenu.menuName}}</a>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>   
        </li>
    </span>

并在sidemenu组件中 -

toggleMenu(index){
        $('.collapsible').collapsible('open', index);   
    }

按预期工作只需要很少的改动就可以使手风琴发挥作用。

谢谢

使用angular2使用下拉列表动态创建实体化sidenav不会初始化可折叠下拉列表

1 个答案: