Dynami c Меню загрузки данных из BE с использованием Angular 8 & Metismenu - PullRequest
Новая
       8

Dynami c Меню загрузки данных из BE с использованием Angular 8 & Metismenu

0 голосов
/ 22 марта 2020

Я пытаюсь перенести проект, использующий Thymeleaf, на Angular 8. Меню реализовано с использованием MetisMenu, загружающего данные из BE (остальные 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>

main-menu.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();
}

внутри общего скрипта, который был добавлен в angular конфигурацию. 

 "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 вызывается, у меню нет дочерних элементов (данные не были загружены).

Я попытался переместить инициализацию metisMenu в файл ts компонента, используя angular ловушки жизненного цикла (AfterViewInit и AfterContentInit), но ничего не получалось .

Интересно, существует ли какой-либо способ прослушивания подписки на данные для запуска инициализации меню, когда все будет готово.

...