Angular 7 本地存储

Question

我浏览了网络，发现使用本地存储的最佳方法是将其放在服务中 我有一个登录控制器，它在响应中发送 API 令牌和用户详细信息 我在本地存储中设置这些详细信息然后我使用角度路由器导航到标题中的仪表板我正在获取设置的本地存储但DOM没有更新我虽然如果我订阅了本地存储服务它会更新但ti不起作用可以有人指出我在正确的方向上，我需要做些什么来在用户登录时更新标题，我应该使用不同类型的本地存储，因为那里还有其他存储提前谢谢你

/*header Component*/
import { Component, OnInit } from '@angular/core';
import { SharedService } from '../shared.service';
import { Router } from '@angular/router';
import { LocalStorageService } from '../../global-services/localstorage.service';

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

  user: any;

    constructor(
              private Shared: SharedService,
              private router: Router,
              private local: LocalStorageService) { }
  fave: any;
    ngOnInit() {
      this.getLocal();
    }
    getLocal() {
        this.local.getLocal().subscribe(
          data => {
            this.user = data;
          }
        );


    }
    logout() {
      this.local.logout();
    }
}
/*LocalStorage Service*/
import { Injectable, OnDestroy } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class LocalStorageService {

    setLocal(user) {
      return localStorage.getItem(user);

    }
    getLocal() {
      return localStorage.getItem('user')
    }

    logout() {
    return localStorage.removeItem('user');
    }
}
/* Login Component*/
import { Component, OnInit } from '@angular/core';
import { LoginService } from '../login.service';
import { Router } from '@angular/router';
import { LocalStorageService } from '../../global-services/localstorage.service'

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

  constructor(
    private api: LoginService,
    private router: Router,
    private local: LocalStorageService) { }
/*Vars*/
  user: any;
  email: string;
  password: string;

  ngOnInit() {
  }
  onSubmit() {
    this.api.login(this.email, this.password).subscribe(
      data => {
        this.user = data;
        localStorage.setItem('api_token', this.user.api_token),
        localStorage.setItem('user', JSON.stringify(this.user));
        this.router.navigateByUrl('/dashboard');
      }
    );
    this.local.setLocal(this.user);
  }
}

/*Header HTML*/
<nav class="uk-navbar-container uk-margin nav1" uk-navbar="mode: click" *ngIf="router.url != '/login'">
  <div class="uk-navbar-left">
    <ul class="uk-navbar-nav nav1">
      <li class="uk-active nav1"><a href="/dashboard">Dashboard</a></li>
      <li class="nav1"><a href="/form">Create form</a></li>
      <li class="nav1"><a uk-icon="icon: books" href="/books"></a></li>

    </ul>
  </div>
<div class="uk-position-right favBtn">
  <a *ngIf="this.user !== null" uk-icon="icon: user" class="uk-button uk-button-default"style="border:none;">{{user.message}}  {{user.last_name}}</a>
    <a uk-icon="icon: sign-in" *ngIf="this.user == null" href="/login" style="border:none; color:white;">Login</a>
    <div *ngIf="this.user !== null" uk-dropdown="mode: click" class=" uk-width-large" uk-dropdown>
      <hr class="uk-divider-icon uk-width-1-1">
      <div class="uk-child-width-1-1@s" uk-grid>
        <a uk-icon="icon: sign-out" href="/login" (click)="logout()">Logout</a>
      </div>
    </div>
  </div>
</nav>

任何帮助将不胜感激

Answer 1

LocalStorage 不向您提供任何流。这些只是静态值。如果您正确使用该服务（您的应用程序共享一个它的实例），可能就足以从 localStorage 返回值：

getLocal() {
  this.user = this.local.getLocal();

附言其他方法也没有意义，例如：

setLocal(user) {
      return localStorage.getItem(user);

1. 不是getItem，而是setItem
2. 无需退货

Answer 2

在您的 LoginService 中，我将创建一个变量 isLoggedIn = false。 在导航到仪表板之前，在您的订阅中将此设置为 true。

...
this.api.isLoggedIn = true;
this.router.navigateByUrl('/dashboard');

现在在您的 HeaderComponent 中也导入您的 LoginService。所以你可以访问这个变量。

用*ngIf="!api.isLoggedIn"代替*ngIf="router.url != '/login'"

Answer 3

您应该使用 EventEmitter 来立即反映您的登录状态。以下是如何使用https://angular.io/api/core/EventEmitter的详细信息

例子

import { Injectable, Output, EventEmitter } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class BaseService {
  @Output() isLoggedin: EventEmitter<any> = new EventEmitter();
  authenticate(data:any){
    this.http.post(path,data).subscribe( (res:any) => {
      console.log(res)
      if(res.status == "success")
      {
        this.isLoggedin.emit(true);
      }
    });
  }
}

当一个变量发出值时。订阅者将反映新的价值。