Angular4：在keycloak.init（）中引导应用程序后，Patternfly辅助导航无法正常工作

Question

这是我第一次使用keycloak身份验证配置我的Angular4应用程序。这里我使用patternfly进行导航菜单。最初我的菜单是

为此，我引导了我的应用程序： main.ts

＆＃13;

＆＃13;

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import {KeycloakService} from './keycloak.service';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

platformBrowserDynamic().bootstrapModule(AppModule);

＆＃13;

＆＃13;

＆＃13;

但是当我实施Keycloak时，改变了我的main.ts：

＆＃13;

＆＃13;

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import {KeycloakService} from './keycloak.service';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';


KeycloakService.init()
  .then(() => {
    platformBrowserDynamic().bootstrapModule(AppModule);
  })
  .catch(() => window.location.reload());

＆＃13;

＆＃13;

＆＃13;

我的菜单HTML是：

＆＃13;

＆＃13;

<div class="nav-pf-vertical
            nav-pf-vertical-with-sub-menus
            nav-pf-vertical-collapsible-menus
            collapsed"
            >
  <ul class="list-group"  style="border-top:1px solid #efefef">
    <li class="list-group-item"  routerLinkActive="active">
      <a routerLink="orders">
        <span class="fa fa-folder-open"
          tooltip="{{'administration_myOrders_label' | translate}}"
          placement="right"
          container="body"></span>
        <span class="list-group-item-value">{{'administration_myOrders_label' | translate}}</span>
      </a>
    </li>
    <li class="list-group-item secondary-nav-item-pf"  data-target="#ipsum-secondary">
      <a>
        <span class="fa fa-list"
          tooltip="{{'administration_myQueues_label' | translate}}"
          placement="right"
          container="body"></span>
        <span class="list-group-item-value">{{'administration_myQueues_label' | translate}}</span>
      </a>
      <div id="ipsum-secondary" class="nav-pf-secondary-nav">
        <div class="nav-item-pf-header">
          <a class="secondary-collapse-toggle-pf" data-toggle="collapse-secondary-nav"></a>
          <span>{{'administration_myQueues_label' | translate}}</span>
        </div>
        <ul class="list-group">
          <li class="list-group-item">
            <a>
              <span class="list-group-item-value">Boston MA - Safety(workorder)</span>
            </a>
          </li>
          <li class="list-group-item">
            <a>
              <span class="list-group-item-value">Boston MA - Safety(workorder)</span>
            </a>
          </li>
          <li class="list-group-item">
            <a>
              <span class="list-group-item-value">Boston MA - Safety(workorder)</span>
            </a>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

这里我在这个应用程序中使用angular-cli。而Angular 4.3.5有人可以给出一个解决方案。 注意：我尝试将patternfly css链接到index.html并从webpacking中的angular-cli.json中删除它;仍然无法使其发挥作用

Answer 1

通过设置超时来解决问题：$（）。setupVerticalNavigation（true）

setTimeout(function() { $().setupVerticalNavigation(true) }, 2000);

inside script.js $（document）.ready（function（）{}）