Angular4: Patternfly La navigation secondaire ne fonctionne pas après l'amorçage de l'application à l'intérieur de keycloak.init()

Question

C'est la première fois que je configure mon application Angular4 avec l'authentification keycloak. Ici, j'utilise patternfly pour le menu de navigation. Dans un premier temps mon menu était

Pour cela, j'avais bootstrapped mon application comme: 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);

Mais quand je l'avais mis en œuvre le Keycloak, a changé ma 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());

Mon HTML pour le menu est:

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

J'utilise ici angulaire cli dans cette application. Et l'angulaire 4.3.5 Quelqu'un peut-il donner une solution s'il vous plaît? Note: J'ai essayé de lier le motif css de patternfly à index.html et de l'enlever de angular-cli.json de webpacking; ne pouvait toujours pas faire fonctionner

Answer 1

résolu le problème en définissant un délai d'attente à:. $() setupVerticalNavigation (true)

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

intérieur script.js $ (document) .ready (function() {}