Question

我尝试使用本地存储和cookie，对我来说很好，但是问题是任何人都可以轻松访问该数据。

我们是否可以通过任何方式从后端获取数据并将其存储在一些全局变量中，并且可以在整个应用程序中利用该值？

Answer 1

您可以像这样创建一个静态变量

export class Global{ 
    public static GlobalVar : any;
}

如果您设置了Global.GlobalVar = yourobject;

您可以使用

来访问其他组件的值

let globalobj = Global.GlobalVar;

但是通过这种方式，如果刷新页面，GlobalVar将被重置。

Answer 2

您可以为此使用服务，创建服务添加providedIn: "root"，因此它将在所有应用程序中可用，并且也是单例实例，您可以在其中放置数据

@Injectable({
  providedIn: "root"
})
export class DataService {
  public data: any;
}

并将此服务注入应用程序中所需的任何位置

Answer 3

如果不是localstorage的选项，但是您希望即使在页面刷新时也要保留数据，则可以通过执行httprequest并将其存储在全局变量中来解决此问题。每个组件都将订阅此函数，并且如果全局变量具有值，则返回该值的可观察值，或进行http请求。消费者不在乎数据来自何处，而只是在乎它从何处获得。因此，创建服务或使用现有服务...

import { of } from 'rxjs';
import { catchError, tap } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn:"root"
})
export class MyService {
   myData: any; // PLEASE do not use 'any', type your data instead!

   constructor(private httpClient: HttpClient) { }

   myHttpRequest(): Observable<any> {
     if (myData) {
       return of(myData);
     } else  {
       return this.httpClient.get<any>('...').pipe(
         tap((data) => this.myData = data),
         catchError(() => /** do stuff **/)
       )
     }
   }
}

然后，需要数据的组件只需订阅myHttpRequest：

// ...

constructor(private myService: MyService) { }

ngOnInit() {
  this.myService.myHttpRequest()
    .subscribe((data: any) => {
      console.log(data); // here's your data!
    });
}

再次...不要使用any，输入数据！

如何在所有应用程序之间共享数据价值

3 个答案: