Angular4:在引导keycloak.init()中的应用程序之后，Patternfly次级导航器无法工作。

Question

这是我第一次使用keycloak身份验证来配置我的Angular4应用程序。在这里，我使用模式苍蝇导航菜单。一开始我的菜单是

​

为此，我启动了我的应用程序，如: 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);

​

但是，当我实现密钥披风时，更改了我的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>

​

在这里，我使用角-cli在这个应用程序。角4.3.5能给出一个解吗？注意:我已经尝试过将patternfly链接到index.html，并将其从网络包装中删除，仍然无法使其工作。

Answer 1

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

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

内部script.js $(文档).ready(函数(){})