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中移除;仍然不能使它工作由超时设置为
答
解决这个问题:$()setupVerticalNavigation(真)
setTimeout(function() { $().setupVerticalNavigation(true) }, 2000);
内的script.js $(文件)。就绪(函数(){} )
浏览器控制台中是否有任何错误? – Yuri
不,没有错误。 –
我试图使用APP_INITIALIZER。还是一样的结果 –