angular - 使用 Angular 8 和 Metismenu 从 BE 加载数据的动态菜单

Question

我正在尝试将使用 Thymeleaf 的项目迁移到 Angular 8。菜单是使用 MetisMenu 从 BE（rest api）加载数据来实现的。

问题

问题是重新加载页面或任何导航后菜单变得无响应。

编码

main-menu.component.html

<div id="navigation">
    <ul class="nav" id="side-menu">
        <li *ngFor="let item of menu?.items">
            <a href='{{item.href}}'>
                <i class="{{item.icon}}"></i> 
                <span>{{item.text}}</span> 
                <span *ngIf="item?.subitems.length > 0" class="fa arrow"></span>
            </a>
            <ul *ngIf="item?.subitems.length > 0" id="{{item.code}}" class="nav nav-second-level collapse">
                <li class="nav nav-second-level" *ngFor="let subitem of item?.subitems">
                    <a href="{{subitem.href}}">{{subitem.text}}</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

主菜单.component.ts

import { Component, OnInit } from '@angular/core';
import { MenuModel } from './menu-model';
import { MenuDataProviderService } from './menu-data-provider.service';

@Component({
  selector: 'app-main-menu',
  templateUrl: './main-menu.component.html',
  styleUrls: ['./main-menu.component.css']
})
export class MainMenuComponent implements OnInit {

  constructor(private menuService : MenuDataProviderService) {

  }

  menu: MenuModel;

  ngOnInit(): void {
    this.menuService.getMenu('MAIN', 'admin').subscribe(data => this.menu = data);
  }
}

MetisMenu 就是这样初始化的

if (document.getElementById('side-menu') != null) {
    $('#side-menu').metisMenu();
}

在已添加到角度配置的通用脚本中。

 "scripts": [
          "./node_modules/jquery/dist/jquery.js",
          "./node_modules/bootstrap/dist/js/bootstrap.js",
          "./node_modules/metismenu/dist/metismenu.js",
          "src/app-script.js" //general app script
        ]
      },

调试应用程序，看到调用metisMenu初始化时，菜单没有子菜单（数据尚未加载）。

我尝试使用角度生命周期挂钩（AfterViewInit 和 AfterContentInit）将 metisMenu 初始化移动到组件 ts 文件，但没有任何效果。

我想知道是否有任何方法可以监听数据订阅以便在准备好时触发菜单初始化。

标签： angularmetismenu