数据未从 component.ts 同步到模板

Question

我在app.component.html中有一个导航栏，需要在每个页面中显示。 我只需要向已登录的用户显示此导航栏。 在app.component.ts ，我通过从 ngOnInit() 生命周期方法调用authService来检查用户是否登录。 但是在获得isLoggedIn数据后，它没有反映在app.component.html中。 成功登录后，我从登录组件导航到根组件，然后它不显示导航，或者当导航完成时isAuthenticated变量没有生效。 But After a reload it shows the navigation 。 如何解决这个问题？ 谢谢。

app.component.html

 <ul *ngIf="isAuthenticated">
    <li><a class="active" href="/home">Home</a></li>
    <li><a href="/addContact">Add User</a></li>
    <li><a href="/listContact">List Users</a></li>
    <li class="dropdown right">
      <a href="javascript:void(0)" class="dropbtn">{{userDetails.userName}}</a>
      <div class="dropdown-content">
        <a href="javascript:void(0)">Profile</a>
        <a href="javascript:void(0)">Reset Password</a>
        <a href="#" (click)="logout($event)">Logout</a>
      </div>
    </li>
  </ul>

app.component.ts

import { Component, OnInit, OnDestroy } 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 implements OnInit {
  userDetails = {
    userName: '',
    userToken: ''
  }
  isAuthenticated = false;
  constructor(public authService: AuthService, private router: Router) {

  }

  ngOnInit(): void {
    this.getUserDetails()
  }

  ngOnDestroy(): void {

  }

  getUserDetails() {
    this.userDetails.userName = this.authService.getUserName()
    this.userDetails.userToken = this.authService.getToken()
    if (this.userDetails.userToken && this.userDetails.userName) {
      this.isAuthenticated = true;
    }
  }
  logout(e) {
    e.preventDefault()
    if (this.authService.signOut()) {
      this.isAuthenticated = false;
      this.router.navigate(['/login'])
    }
  }
}

登录组件.ts

import { Component, OnInit } from '@angular/core';
import { AuthService } from "../../_services/auth.service";
import { Router } from '@angular/router';
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  login = {
    username: '',
    password: ''
  }

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

  ngOnInit(): void {
  }

  loginContact() {

    const data = {
      username: this.login.username,
      password: this.login.password
    }
    if (data) {
      this.authService.signIn(data).subscribe(
        res => {
          var result = JSON.parse(JSON.stringify(res));
          if (result) {
            localStorage.setItem("token", result.accessToken);
            localStorage.setItem("userName", result.username);
            console.log("logged in successfully")
            this.router.navigate(['/home']);
          } else {
            this.router.navigate(['/']);
          }

        },
        error => {
          console.log(error)
          alert("Signin failed " + JSON.stringify(error))
        }
      )
    }
  }
}

login.component.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<h2>Login Form</h2>

<form class="login_form" name="login_form" (ngSubmit)="loginContact()" method="post">
  <div class="imgcontainer">
    <img src="assets/img/img_avatar2.png" alt="Avatar" class="avatar">
  </div>

  <div class="container">
    <label for="uname"><b>Username</b></label>
    <input type="text" placeholder="Enter Username" name="username" required [(ngModel)]="login.username">

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="password" required [(ngModel)]="login.password"> 

    <button type="submit">Login</button>
    <label>
      <input type="checkbox" checked="checked" name="remember"> Remember me
    </label>
  </div>

  <div class="container" style="background-color:#f1f1f1">
    <button type="button" class="cancelbtn">Cancel</button>
    <span class="psw">Forgot <a href="#">password?</a></span>
  </div>
</form>

</body>
</html>

Answer 1

您可以使用BehaviorSubject实现它

首先声明public isAuthenticated$: BehaviorSubject<boolean>;

然后在ngOnInit()上设置其默认值 state this.isAuthenticated$ = new BehaviorSubject(false);

将 function getUserDetails()内部更改为this.isAuthenticated$.next(true);

最后在您的模板中*ngIf="isAuthenticated$ | async" 。

Answer 2

当您在登录路径中时， app.component 已经初始化，因此当您成功登录并重定向到主页时，正如我所说，app.component 已经初始化，因此它不会再次运行 ngOnIt。 所以对于这个问题，你应该使用rxjs Subjects

或者您可以简单地使用不同的容器组件，例如：一个身份验证容器组件和另一个用于所有路由布局容器组件。 这种模式将构建您的应用程序并且易于维护。

@Crazyrubixfan 下面是更好的应用程序结构示例： https://stackblitz.com/edit/angular-scfdfb?file=src%2Fapp%2Fmodules%2Fcore-layout%2Fcore-layout.component.html

Answer 3

我添加了一个带有SetInterval function 的Observer ，它在 app.component.ts 的时间间隔内检查是否经过身份验证，并在模板中使用了该变量。

不知道这个方法对不对（可能是错的）

app.component.ts

isAuthenticatedObs = new Observable<boolean>((observer: Observer<boolean>) => {
    setInterval(() => observer.next(this.authService.isAuthenticated())
      , 1000);
  });

app.component.html

<ul *ngIf="isAuthenticatedObs | async">
    <li><a class="active" href="/home">Home</a></li>
    <li><a href="/addContact">Add User</a></li>
    <li><a href="/listContact">List Users</a></li>
    <li class="dropdown right">
      <a href="javascript:void(0)" class="dropbtn">{{userDetails.userName}}</a>
      <div class="dropdown-content">
        <a href="javascript:void(0)">Profile</a>
        <a href="javascript:void(0)">Reset Password</a>
        <a href="#" (click)="logout($event)">Logout</a>
      </div>
    </li>
  </ul>

如果你有，请给我一个更好的方法。 谢谢。