Question

我有导航栏（下面的代码）设置* ngIf =“user”后，我尝试在导航栏中显示用户头像，但获取该占位符。刷新页面后，我获得了用户头像。所以我想知道如何在点击登录按钮后只刷新导航栏。

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
 <ul class="navbar-nav navbar-right">
    <li *ngIf="!authService.loggedIn()" class="nav-item" [routerLinkActive] = "['active']" [routerLinkActiveOptions] = "{exact:true}">
      <a  class="nav-link" [routerLink]="['/register']">Register</a>
    </li>
    <li *ngIf="!authService.loggedIn()" class="nav-item"  [routerLinkActive] = "['active']" [routerLinkActiveOptions] = "{exact:true}" >
        <a class="nav-link"[routerLink]="['/login']">Login</a>
    </li>
    <li *ngIf="authService.loggedIn()" class="nav-item avatar dropdown" style="cursor:pointer">
      <a class="nav-link dropdown-toggle waves-effect waves-light" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

        <img *ngIf="user" src="{{user.avatar}}" style="border-radius:15px; height:35px; width:35px;">
         <img *ngIf="!user" src="http://res.cloudinary.com/dk34qvajk/image/upload/v1513190129/placeholder.png" style="border-radius:15px; height:35px; width:35px;"> 
      </a>
        <div class="dropdown-menu dropdown-menu-right dropdown-purple" aria-labelledby="navbarDropdownMenuLink-5">
          <a  class="dropdown-item waves-effect waves-light" [routerLink]="['/profile']">Profile</a>
          <a  class="dropdown-item waves-effect waves-light" [routerLinkActive]="['active']" [routerLink]="['/dashboard']">Dashboard</a>
          <a class="dropdown-item waves-effect waves-light" [routerLinkActive] = "['active']" [routerLinkActiveOptions] = "{exact:true}" (click)="onLogoutClick()" >Logout</a>
        </div>
    </li>
  </ul>
</nav>

UPD

这里是navbar.component.ts

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../services/auth.service';
import { Router } from '@angular/router';
import { FlashMessagesService } from 'angular2-flash-messages';

@Component({
 selector: 'app-navbar',
 templateUrl: './navbar.component.html',
 styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {

 user: Object;

  constructor(private authService:AuthService, private router:Router, private flashMessage:FlashMessagesService) { }

//added onInit body to get user object in navbar

ngOnInit() {
   this.authService.getProfile().subscribe(profile=>{
     this.user = profile.user;
   },
   err=>{
    console.log(err);
    return false;
   });
}

 onLogoutClick(){
   this.authService.logout();
   this.flashMessage.show('You are logged out', {cssClass: 'alert-success', timeout: 3000 });
   this.router.navigate(['/login']);
   return false;
 }
}

现在这里是auth.service.ts

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';
import { tokenNotExpired } from 'angular2-jwt'

@Injectable()
export class AuthService {
  authToken : any;
  user : any;

  constructor(private http:Http) { }

  registerUser(user){
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    return this.http.post('http://localhost:17696/signup', user, {headers:headers})
      .map(res => res.json())
  }

  authenticateUser(user){
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    return this.http.post('http://localhost:17696/signin', user, {headers:headers})
      .map(res => res.json())
  }

  getProfile(){
    let headers = new Headers();
    this.loadToken();
    headers.append('Authorization', this.authToken)
    headers.append('Content-Type', 'application/json');
    return this.http.get('http://localhost:17696/users/profile', {headers:headers})
      .map(res => res.json())
  }

  storeUserData(token, user){
    localStorage.setItem('id_token', token);
    localStorage.setItem('user', JSON.stringify(user));    //cause local storage can store only strings not objects
    this.authToken = token;
    this.user =user;
  }

  loadToken(){
    const token = localStorage.getItem('id_token');
    this.authToken = token; 
  }

  loggedIn(){
    return tokenNotExpired('id_token');
  }

  logout(){
    this.authToken = null;
    this.user = null;
    localStorage.clear();
  }
}

此外我还有一些错误，例如（导致尝试在启动导航栏组件时获取配置文件）

Answer 1

问题是缺少异步。

* ngIf =“user | async”

您还可以使用安全导航器操作符'？'

尝试此操作，如果它没有上传您的组件代码以便更好地查看它。

Answer 2

`

<nav ngIf="!Hide" class="navbar navbar-expand-lg navbar-dark bg-primary">
seu código
</nav>

如果在点击登录按钮时你不会改变页面：设置！隐藏隐藏然后设置隐藏到！隐藏。

hide = true;
hide = false;

如果您要更改页面：

location.reload()

如何在navbar Angular中更新用户图像（单击时）

2 个答案: