使用 angular2 使用下拉菜单动态创建物化 sidenav 不会初始化可折叠下拉菜单答案

【问题标题】：Dynamic creation of materialize sidenav with dropdown using angular2 does not initialize collapsible dropdown使用 angular2 使用下拉菜单动态创建物化 sidenav 不会初始化可折叠下拉菜单
【发布时间】：2017-04-15 15:36:47
【问题描述】：

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

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

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

html代码sn-p如下-

<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");
    }
}

在这个问题上需要帮助...我被卡住了，无法继续...

【问题讨论】：

关于我的应用程序布局的重要一点是 - 当用户成功通过身份验证并导航到欢迎屏幕时，欢迎组件的第一个屏幕截图有 3 个 shild 组件 1. HeaderNav 2. SideMenu 3.主要内容。 headernav 水平菜单单击进行其余调用以获取其子菜单并创建 html 菜单结构。现在，在成功登录后加载欢迎组件时，可折叠组件运行良好。但是当单击其他水平菜单时，加载的可折叠子菜单不起作用。如何再次重新初始化子菜单？

标签： angular materialize

【解决方案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>

在侧边菜单组件中 -

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

这可以按预期工作，只需进行一些更改即可使手风琴工作。

谢谢

【讨论】：