Angular 8 *ngIf 未在导航栏中正确反映 UI

Question

I am trying to integrate bootstrap@4 into an Angular 8 application so to make it fully-responsive.

If the user is not registered (signed up) or is not logged-in, some elements in the nav bar should be hidden (logout btn or link) and if he is logged in others should (login btn or link).

To make the case more clear, below are snippets of code where the header.ts file include a verification whether the user object exists or not. This is done through a service injection in the.ts file constructor. Retrospectively, the service makes a call to a firebase REST API to check for the validity of the authentication.

After a valid authentication, the login btn or link should go away and a logout element should appear instead.

This is partially working. I navigate away from the login interface (form) into another component (services) but the navbar does not update respectively. I still have the same ui before logging in.

Any hints or suggestions how to solve the issue? Is it because of bootstrap@4? (There are no errors in the console)

Thanks in advance

 import { Component, OnInit, OnDestroy } from '@angular/core'; import { AuthService } from 'src/app/auth/auth.service'; import { Subscription } from 'rxjs'; @Component({ selector: 'app-header', templateUrl: './header.component.html', styleUrls: ['./header.component.css'] }) export class HeaderComponent implements OnInit, OnDestroy { isAuthenticated = false; private userSub: Subscription; constructor(private authservice: AuthService) { } ngOnInit() { this.userSub = this.authservice.user.subscribe(user =>{ this.isAuthenticated = !!user; } ); } ngOnDestroy(){ this.userSub.unsubscribe(); } }

 <nav class="navbar navbar-expand-md navbar-light bg-light sticky-top"> <div class="container-fluid"> <a class="navbar-brand" href="#"><img src="assets/img/logo.png"></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <li> <a class="nav-link" routerLink="/home" routerLinkActive="active" style="cursor: pointer;">Home</a> </li> <li> <a class="nav-link" routerLink="/about" routerLinkActive="active" style="cursor: pointer;">About</a> </li> <li routerLinkActive="active"> <a class="nav-link" routerLink="/services" style="cursor: pointer;">Services</a> </li> <li routerLinkActive="active"> <a class="nav-link" routerLink="/team" style="cursor: pointer;">Team</a> </li> <li routerLinkActive="active" *ngIf="!isAuthenticated"> <a class="nav-link" routerLink="/auth" style="cursor: pointer;" > Login | Sign up </a> </li> <li routerLinkActive="active" *ngIf="isAuthenticated"> <a class="nav-link" routerLink="/auth" style="cursor: pointer;" > Logout </a> </li> </ul> </div> </div> </nav>

Answer 1

This is weird.

@kurt Hamilton, below is the sevrvice

 import { Component } from '@angular/core'; import { NgForm } from '@angular/forms'; import { Observable } from 'rxjs'; import { AuthService } from './auth.service'; import { AuthResponseData} from'./auth.service' import { Router } from '@angular/router'; @Component({ selector: 'app-auth', templateUrl: './auth.component.html', styleUrls: ['./auth.component.css'] }) export class AuthComponent { isLoginMode= true; error: string = null; constructor(private authservice: AuthService, private router: Router ){} onSwitchMode() { this.isLoginMode = !this.isLoginMode; } onSubmit(form: NgForm){ if(!form.valid){ return; } const email= form.value.email; const password= form.value.password; let authObs : Observable<AuthResponseData>; if(this.isLoginMode){ authObs = this.authservice.login(email, password); }else{ authObs = this.authservice.signUp(email, password); } authObs.subscribe( response =>{ console.log(response); this.router.navigate(['/services']); }, errorMessage =>{ console.log(errorMessage); this.error = errorMessage; } ); form.reset(); } }

Thank you very much, but yet I do not get the point. Please let me know if you have a solution! Thanks again.

@Fmerco, I do subscribe to observables in the auth.component.ts (included below)

 import { Injectable } from '@angular/core'; import { HttpClient, HttpErrorResponse } from '@angular/common/http'; import {catchError, tap} from 'rxjs/operators' import { throwError, Subject } from 'rxjs'; import { User } from './user.model'; export interface AuthResponseData { idToken: string; email: string; refreshToken: string; expiresIn: string; localId: string; registered?: boolean; } @Injectable({providedIn: 'root'}) export class AuthService{ user = new Subject <User>(); constructor(private http: HttpClient){} signUp( email: string , password: string){ return this.http.post<AuthResponseData>( 'https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=[key-omitted]', { email: email, password: password, returnSecureToken: true } ).pipe(catchError (this.handleError), tap(resData =>{ this.handleAuthentication( resData.email, resData.localId, resData.idToken, +resData.expiresIn); })); } login(email: string, password: string){ return this.http.post<AuthResponseData>( 'https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=[key-omitted]', { email: email, password: password, returnSecureToken: true } ).pipe(catchError (this.handleError)); } private handleAuthentication(email: string, userId: string, token: string, expiresIn: number){ const expirationDate = new Date(new Date().getTime() + expiresIn * 1000); const user = new User( email, userId, token, expirationDate ); this.user.next(user); } private handleError(errorRes: HttpErrorResponse){ let errorMessage = 'An unknown error occured'; if(!errorRes.error || !errorRes.error.error){ return throwError(errorMessage); } switch(errorRes.error.error.message){ case 'EMAIL_EXISTS': errorMessage = 'This email already exists' break; case 'EMAIL_NOT_FOUND': errorMessage = 'This email does not exist' break; case 'INVALID_PASSWORD': errorMessage= 'Incorrect password' break; } return throwError(errorMessage); } }