Question

我是Angular的新手，很难掌握如何处理异步请求。

我有3个组成部分：父级-AppComponent 子级-LoginComponent，NavbarComponent，DashboardComponent，MainComponent，SidebarComponent

和一个AuthService

在日志记录组件上按“登录”按钮时，我需要将布尔值“ true”值传递给所有组件。在导航栏组件上按“注销”按钮时，我需要将布尔值“ false”值传输到所有组件并设置user = null

如果是->

使用用户ID
执行http.get（“ http://localhost:3000/user/” + id）请求以检索完整的用户信息，并将用户信息注入仪表板，Main，Sidebar，App和Navbar组件。

问题是，每当我注销所有组件上的false / true值立即更新，但用户信息不会变为null，除非刷新页面或将其与路由器一起发送到另一个组件，然后返回MainComponent，这同样用新的登录名。

如何在不刷新页面的情况下立即更新所有组件中的用户信息和状态？

authService：

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Router } from "@angular/router";

import { User } from "../models/User";

@Injectable({ providedIn: "root" })
export class AuthService {
  user: User;
  private _url = "http://localhost:5000/user/";

  constructor(private http: HttpClient, private _router: Router) {}

  registerUser(user) {
    return this.http.post<any>(this._url + "register", user);
  }

  loginUser(user) {
    return this.http.post<any>(this._url + "login", user);
  }

  logoutUser() {
    localStorage.clear();
    this._router.navigate(["/"]);
  }

  loggedIn() {
    return !!localStorage.getItem("token");
  }

  getToken() {
    return localStorage.getItem("token");
  }

  getCurrentUser() {
    return this.http.get<any>("http://localhost:5000/shop/current");
  }
}

主/侧边栏组件：

import { Component, OnInit, DoCheck } from "@angular/core";

import { AuthService } from "src/app/services/auth.service";

import { User } from "src/app/models/User";

@Component({
  selector: "app-sidebar",
  templateUrl: "./sidebar.component.html",
  styleUrls: ["./sidebar.component.css"]
})
export class SidebarComponent implements OnInit, DoCheck {
  isSidenavOpen: boolean = true;
  user: User;

  constructor(private _authService: AuthService) {}

  ngOnInit() {
    if (this._authService.loggedIn()) this._authService.getCurrentUser().subscribe(res => (this.user = res.user));
    else this.user = null;
  }

  ngDoCheck() {
    if (!this._authService.loggedIn()) this.user = null;
  }
}

登录：

  constructor(private _authService: AuthService, private _router: Router) {}



  // onLoginUser() {
  //   this._authService.loginUser(this.loginUserData).subscribe(
  //     res => {
  //       localStorage.setItem("token", res.token);
  //       localStorage.setItem("user", res.user._id);
  //       this._router.navigate(["/"]);
  //     },
  //     err => console.log(err)
  //   );
  // }
}

Answer 1

在登录，注销等事件中使用事件EventEmitter至emit event并侦听取决于用户数据的每个组件。

在使用中，您在其中调用logoutUser, loginUser的{{1}}方法：

AuthService

然后加入组件：

// LoginService
userLoggin: EventEmitter<User> = new EventEmitter();
userLoggout: EventEmitter<any> = new EventEmitter();

constructor(private _authService: AuthService, private _router: 
Router) {}

loginUser() {
  this._authService.loginUser(this.loginUserData).subscribe(
    res => {
      localStorage.setItem("token", res.token);
      localStorage.setItem("user", res.user._id);
      this.userLoggin.emit(res.user);
      this._router.navigate(["/"]);
    },
    err => console.log(err)
    );
  }

  logoutUser() {
  this._authService.logoutUser().subscribe(
    res => {
      this.userLoggout.emit();
    },
    err => console.log(err)
    );
  }
}

如何在Angular 6中处理来自后端的多个异步请求？

1 个答案: