0

这是我第一次使用 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 中删除；仍然无法使其工作

4

1 回答 1

0

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

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

在 script.js 中 $(document).ready(function(){})

于 2017-11-13T13:04:11.713 回答