Angular 4 中无法刷新路由器菜单
Unable to refresh the router menu in Angular 4
在 Angular 4
中执行 router.navigateByUrl
时,我无法让路由器菜单自行更新。
我所做的非常基础,我只是想在用户未通过t/is 身份验证时隐藏login/logout 菜单。下面是我的 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>
这是我的 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');
}
}
如您所知,Login
和 Logout
是两个独立的组件。为了显示代码的哪一部分导致了这个问题,下面是 LogoutComponent::ngOnInit()
:
ngOnInit() {
// logout
this.auth.logout();
// redirect to /login
this.router.navigateByUrl('');
}
最后一个命令能够重定向到 /
但菜单未根据第一个代码中发布的模板更新。
编辑:
这是用于 login/logout 用户的服务:
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 = '';
}
}
根据路线将其更改为,
this.router.navigate(['/login']);
虽然以上内容将解决您的导航 issue.In 除此之外,实际问题在于您更新 isLogged
变量的方式 app.component.html
按照你现在的方式,不会在其他组件更新的时候更新。所以你应该有 shared service
和一个变量 subject
,它会观察变化。
像这样,
export class AppMessageQueuService {
authenticatedUserData: Subject<LoginInfo>;
constructor() {
this.authenticatedUserData = new Subject<LoginInfo>();
}
}
在 Angular 4
中执行 router.navigateByUrl
时,我无法让路由器菜单自行更新。
我所做的非常基础,我只是想在用户未通过t/is 身份验证时隐藏login/logout 菜单。下面是我的 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>
这是我的 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');
}
}
如您所知,Login
和 Logout
是两个独立的组件。为了显示代码的哪一部分导致了这个问题,下面是 LogoutComponent::ngOnInit()
:
ngOnInit() {
// logout
this.auth.logout();
// redirect to /login
this.router.navigateByUrl('');
}
最后一个命令能够重定向到 /
但菜单未根据第一个代码中发布的模板更新。
编辑: 这是用于 login/logout 用户的服务:
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 = '';
}
}
根据路线将其更改为,
this.router.navigate(['/login']);
虽然以上内容将解决您的导航 issue.In 除此之外,实际问题在于您更新 isLogged
变量的方式 app.component.html
按照你现在的方式,不会在其他组件更新的时候更新。所以你应该有 shared service
和一个变量 subject
,它会观察变化。
像这样,
export class AppMessageQueuService {
authenticatedUserData: Subject<LoginInfo>;
constructor() {
this.authenticatedUserData = new Subject<LoginInfo>();
}
}