проблема с левым боковым меню и подменю

Question

У меня есть меню слева, которое не отображается должным образом.Когда я перенаправляю один компонент в другой, он не работает.Когда я перемещаю панель мониторинга в компонент отключения, список подменю не отображается.Когда я обновил и сразу нажал на компонент поездки, это показало подсписок.Но когда я перехожу на панель инструментов и снова нажимаю на компонент отключения, который не работает.

Я ожидаю, что при переходе одного на другой компонент подменю будет работать должным образом.

<div class="left side-menu">

  <div class="sidebar-inner slimscrollleft">

    <div class="user-details">
      <div class="text-center"></div>
      <div class="user-info"></div>
      <div id="sidebar-menu">

        <ul>
          <li>
            <a href="#" routerLink="/dashboard" routerLinkActive="activemenu" class="waves-effect">
              <i class="mdi mdi-home"></i>
              <span> Dashboard</span>
            </a>
          </li>
          <li>
            <a href="#" routerLink="/user" routerLinkActive="activemenu" class="waves-effect">
              <i class="mdi mdi-account"></i>
              <span> User</span>
            </a>
          </li>

          <li>
            <a href="#" routerLink="/tripmangement" routerLinkActive="activemenu" class="waves-effect">
              <i class="mdi mdi-bus"></i>
              <span> Trip</span>
            </a>
            <ul>
              <li>
                <a href="#" routerLink="/place" routerLinkActive="activemenu" class="waves-effect">
                  <i class="mdi mdi-bus"></i>
                  <span>Location</span>
                </a>
              </li>
              <li>
                <a href="#" routerLink="/triproute" routerLinkActive="activemenu" class="waves-effect">
                  <i class="mdi mdi-bus"></i>
                  <span>Routes</span>
                </a>
              </li>
              <li>
                <a href="#" routerLink="/ticketprice" routerLinkActive="activemenu" class="waves-effect">
                  <i class="mdi mdi-bus"></i>
                  <span>Ticket Price</span>
                </a>
              </li>
            </ul>
          </li>
          <li>
            <a class="waves-effect">
              <i class="mdi mdi-bus"></i>
              <span>Bookings</span>
            </a>
            <ul class="">
              <li>
                <a href="#" routerLink="/addbooking" routerLinkActive="activemenu" class="waves-effect">
                  <i class="mdi downloads"></i>
                  <span>Add</span>
                </a>
              </li>
              <li>
                <a href="#" routerLink="/listbooking" routerLinkActive="activemenu" class="waves-effect">
                  <i class="mdi mdi-bus"></i>
                  <span>List</span>
                </a>
              </li>
            </ul>

          </li>
          <li>
            <a class="waves-effect">
              <i class="mdi mdi-clipboard-text"></i>
              <span>Reports</span>
            </a>
            <ul class="">
              <li>
                <a href="#" routerLink="/userreport" routerLinkActive="activemenu" class="waves-effect">
                  <i class="mdi downloads"></i>
                  <span>User Report</span>
                </a>
              </li>
              <li>
                <a href="#" routerLink="/bookingreport" routerLinkActive="activemenu" class="waves-effect">
                  <i class="mdi mdi-bus"></i>
                  <span>Booking Report</span>
                </a>
              </li>
            </ul>
          </li>
          <li>
            <a class="waves-effect">
              <i class="mdi mdi-settings"></i>
              <span>Settings</span>
            </a>
            <ul class="">
              <li>
                <a href="#" routerLink="/page" routerLinkActive="activemenu" class="waves-effect">
                  <i class="mdi mdi-bus"></i>
                  <span>Page setting</span>
                </a>
              </li>
              <li>
                <a href="#" routerLink="/general" routerLinkActive="activemenu" class="waves-effect">
                  <i class="mdi mdi-bus"></i>
                  <span>General Setting</span>
                </a>
              </li>
              <li>
                <a href="#" routerLink="/emailformat" routerLinkActive="activemenu" class="waves-effect">
                  <i class="mdi-email"></i>
                  <span>Email format Setting</span>
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="clearfix"></div>
    </div>
  </div>