Question

在router.navigateByUrl中执行Angular 4时，我无法自行更新路由器菜单。

我正在做的是非常基本的，我只是在用户未经过身份验证时尝试隐藏登录/注销菜单。以下是我的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('');
}

最后一个命令可以重定向到/，但菜单不会根据第一个代码中发布的模板进行更新。

修改这是用于登录/注销用户的服务：

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

Answer 1

根据路线更改它，

this.router.navigate(['/login']);

虽然以上内容将解决您的导航问题。除此之外，实际问题在于您在isLogged

中更新 app.component.html 变量的方式

根据您现在的方式，只要在其他组件中更新，它就不会得到更新。因此，您应该使用 shared service 并使用变量 subject 来监视更改。

像这样，

export class AppMessageQueuService {
    authenticatedUserData: Subject<LoginInfo>;
    constructor() {
        this.authenticatedUserData = new Subject<LoginInfo>();
    }
}

无法刷新Angular 4中的路由器菜单

1 个答案: