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

Question

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

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

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

但是当我实现了 Keycloak 后，改变了我的 main.ts:

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());

我的 HTML 菜单是：

<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>

我在此应用程序中使用 angular-cli。还有 Angular 4.3.5 有人能给个解决办法吗。注意：我已经尝试将 patternfly css 链接到 index.html 并将其从 webpacking 的 angular-cli.json 中删除；仍然无法正常工作

Answer 1

通过将超时设置为：$().setupVerticalNavigation(true) 解决了这个问题

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

里面 script.js $(document).ready(function(){})

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

Angular4: Patternfly Secondary nav not working after bootstrapping the app inside keycloak.init()

keycloak

angular-cli

keycloak-services

patternfly

angular