[英]Unable to refresh the router menu in Angular 4
I'm unable to have the router menu update itself when doing a router.navigateByUrl
in Angular 4
. 在
Angular 4
执行router.navigateByUrl
时,无法更新路由器菜单。
What I'm doing is really basic, I'm just trying to hide the login/logout menu when the user isn't/is authenticated. 我正在做的事情实际上是很基本的,我只是试图在未对用户进行身份验证时隐藏登录/注销菜单。 Below is my
app.component.html
: 以下是我的
app.component.html
:
<h1>
{{ appName }}
</h1>
<nav>
<a *ngIf="!isLogged" routerLink="/login">Login</a>
<a *ngIf="isLogged" routerLink="/logout">Logout</a>
</nav>
<router-outlet></router-outlet>
And here is my app.component.ts
: 这是我的
app.component.ts
:
import { Component } from '@angular/core';
import { AuthService } from './services/auth.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
isLogged: boolean;
// inject auth
constructor(private auth: AuthService, private router: Router) { }
ngOnInit() {
this.isLogged = this.auth.isLogged;
console.log('[app] islogged:' + this.auth.isLogged);
// redirect according to whether user logged in
if (this.isLogged)
this.router.navigateByUrl('/total');
else
this.router.navigateByUrl('/login');
}
}
As you can tell, Login
and Logout
are two separate components. 如您所知,
Login
和Logout
是两个独立的组件。 To show which part of the code is responsible for this issue, below is the LogoutComponent::ngOnInit()
: 为了显示导致此问题的代码部分,下面是
LogoutComponent::ngOnInit()
:
ngOnInit() {
// logout
this.auth.logout();
// redirect to /login
this.router.navigateByUrl('');
}
The last command is able to redirect to the /
but the menu isn't updated according to the template posted in the first code. 最后一个命令能够重定向到
/
但菜单不会根据第一个代码中发布的模板进行更新。
Edit: This is the service used to login/logout users: 编辑:这是用于登录/注销用户的服务:
import { Injectable } from '@angular/core';
@Injectable()
export class AuthService {
isLogged: boolean = false;
token: string;
constructor() { }
login(token: string) {
// save token on login
this.isLogged = true;
this.token = token;
}
logout() {
// delete token on logout
this.isLogged = false;
this.token = '';
}
}
change it based on the route as, 根据路线更改为
this.router.navigate(['/login']);
While the above will solve your navigation issue.In addition to that, the actual problem lies with the way you update isLogged
variable in your app.component.html
上面的内容可以解决您的导航问题,除此之外,实际的问题还在于更新
app.component.html
isLogged
变量的app.component.html
According to the way you have right now, it wont get updated whenever it is updated in other components. 根据您现在的方式,只要在其他组件中对其进行更新,就不会对其进行更新。 So you should have the
shared service
with a variable subject
, which would watch for changes. 因此,您应该为
shared service
提供一个可变的subject
,它将监视更改。
Something like this, 像这样
export class AppMessageQueuService {
authenticatedUserData: Subject<LoginInfo>;
constructor() {
this.authenticatedUserData = new Subject<LoginInfo>();
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.