Angular4：Patternfly在导入keycloak.init（）内的应用程序后，Secondary nav不起作用

这是我第一次使用keycloak身份验证配置我的Angular4应用程序。这里我使用的是patternfly导航菜单。最初，我的菜单是 Angular4：Patternfly在导入keycloak.init（）内的应用程序后，Secondary nav不起作用

为了这个，我自举我的应用程序，如： 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>

在这里，我采用了棱角分明-CLI在此应用程序。和角4.3.5有人可以提供一个解决方案。注意：我已经尝试将patternfly css链接到index.html，并将它从webpacking中的angular-cli.json中移除;仍然不能使它工作由超时设置为

来源

2017-08-17 Rakesh Lochan Sarma

浏览器控制台中是否有任何错误？ – Yuri

不，没有错误。 –

我试图使用APP_INITIALIZER。还是一样的结果 –

解决这个问题：$（）setupVerticalNavigation（真）

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

内的script.js $（文件）。就绪（函数（）{} ）

来源

2017-11-13 13:04:11

Angular4：Patternfly在导入keycloak.init（）内的应用程序后，Secondary nav不起作用

回答

相关问题