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');
    }
}

如您所知,LoginLogout 是两个独立的组件。为了显示代码的哪一部分导致了这个问题,下面是 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>();
    }
}