我有一个正在运行的Angular 4应用程序,我正在实现登录机制。成功登录后,我将页面重定向到My HeaderComponent,其中有一个图像可以在点击时切换侧边栏。但问题是,在登录后我需要刷新页面一次才能打开侧栏。它不是第一次尝试开放。 我尝试使用 window.location.reload()但不能正常工作。此外,一些相关的帖子建议使用params导航到相同的URL **(在我的情况下为/ admin)**然后再调用一个调用ngOnInit的方法。但在我的情况下,ngOnInit()中没有需要获取的特殊数据,而是我的HTML似乎被打破了。有什么建议??
我的组件: -
Login.ts
if (this.myForm.value.username === 'admin' && this.myForm.value.password === 'Pooltoo@dm!n') {
localStorage.setItem('admintoken', 'Pooltoo@dm!n1234!@#$');
this.router.navigateByUrl('/admin');
}else {
alert('Wrong Username/Password Combination. Pls try again!!');
}
HeaderComponent.ts
export class HeaderComponent implements OnInit {
constructor (private adminService: AdminService, private router: Router) {
}
onLogout() {
this.adminService.logOutAdmin();
this.router.navigateByUrl('/login');
}
isLoggedIn() {
return this.adminService.isLoggedIn();
}
ngOnInit() {
if (!this.adminService.isLoggedIn()) {
this.router.navigateByUrl('/login');
}
}
}
HeaderComponent.html
<div id="wrapper" *ngIf="isLoggedIn()">
<nav class="navbar navbar-inverse">
<div class="container-fluid" id="navHeight">
<!-- <a class="btn btn-primary" id="menu-toggle">Toggle Menu</a>
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" id="menu-toggle" >Pooltoo Admin DashBoard<span><img src="assets/images/brand.png" style="width: auto; height: 30px" class="img-rounded"></span></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<form class="navbar-form navbar-left">
</form>
<ul class="nav navbar-nav navbar-right">
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Sidebar -->
<div id="sidebar-wrapper">
<li class="sidebar-brand">
<a routerLinkActive="active">
<span><img alt="Brand" id="pooltoLogo" src="assets/images/logo.png" style="height: 120px; width: 140px; margin-top: -50px"></span>
</a>
</li>
<button class="btn btn-danger" (click)="onLogout()" style="margin-left: 50px; margin-bottom: 10px">LogOut</button>
<ul class="nav nav-pills">
<li routerLinkActive="active">
<a [routerLink]="['dashboard']">Dashboard</a>
</li>
</ul>
<ul class="nav nav-pills">
<li routerLinkActive="active">
<a [routerLink]="['configurations']">Configurations</a>
</li>
</ul>
<ul class="nav nav-pills">
<li routerLinkActive="active">
<a [routerLink]="['order-management']">Order Management</a>
</li>
</ul>
<ul class="nav nav-pills">
<li routerLinkActive="active">
<a [routerLink]="['promos']">Promo</a>
</li>
</ul>
<ul class="nav nav-pills">
<li routerLinkActive="active">
<a >Finance</a>
</li>
</ul>
<ul class="nav nav-pills">
<li routerLinkActive="active">
<a [routerLink]="['reports']">Reports</a>
</ul>
<ul class="nav nav-pills">
<li routerLinkActive="active">
<a [routerLink]="['custom-reports']">Customized Reports</a>
</ul>
<ul class="nav nav-pills">
<li routerLinkActive="active">
<a [routerLink]="['dashboard-control-centre']">Dashboard Control Centre</a>
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<!-- /#page-content-wrapper -->
<router-outlet></router-outlet>
</div>
答案 0 :(得分:3)
你可以做的是创建一个新的javascript文件并将其放在'assets / js / theme.js'下。在此文件中,添加以下代码:
$.myTheme.navbar = {
activate: function() {
$("#menu-toggle").click(function(e) { e.preventDefault(); });
$("#wrapper").toggleClass("toggled"); });
}
}
然后在 HeaderComponent.ts 文件中,导入jquery
和我们上面创建的theme.js
文件,如下所示:
import 'jquery';
declare var $: any;
import 'assets/js/theme.js'; // change this path to point to the theme.js file in your assets folder
在ngOnInit()
函数中,从theme.js
:
ngOnInit() {
$.myTheme.navbar.activate();
// other functions here
}
看看这是否解决了您的问题:)。
注意:别忘了在theme.js
中的“脚本”数组中添加.angular-cli.json
文件,如下所示:
.angular-cli.json 文件
...
"scripts": [
... // other scripts
"assets/js/theme.js" // load this last
]
...
答案 1 :(得分:0)
这是我的解决方法
<li class="nav-item nav-item-submenu">
<a href="#k-nav" class="nav-link legitRipple dropdown-toggle" data-toggle="collapse">
<i class="icon-copy"></i>
</a>
<div class="collapse" id="k-nav">
<ul class="nav nav-sidebar" data-submenu-title="k">
<li class="nav-item">
<a [routerLink]="['./']" class="nav-link">k</a>
</li>
</ul>
</div>
</li>