Angular 2 - 存储全局变量（例如身份验证令牌）以便所有类都可以访问它们的最佳方法是什么

typescript

在Angular 2中，如果我们想要在整个应用程序中共享全局变量，例如身份验证令牌，有几种方法可以实现。在本文中，我们将探讨最佳的方法，并提供一个案例代码来帮助理解。

使用服务

在Angular中，服务是用于共享数据和功能的有效方式。我们可以创建一个名为"GlobalService"的服务来存储全局变量，并让其他类可以访问它们。

首先，我们需要创建一个新的Angular服务。在终端中运行以下命令来生成一个新的服务文件：

ng generate service GlobalService

这将在src/app目录下创建一个名为global.service.ts的文件。打开这个文件，并添加以下代码：

typescript
import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class GlobalService {
  public authenticationToken: string;
}

在这个服务中，我们创建了一个名为authenticationToken的公共属性来存储身份验证令牌。

接下来，我们需要在应用程序的根模块中提供这个服务。打开src/app/app.module.ts文件，并添加以下代码：

typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GlobalService } from './global.service';
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [GlobalService],
  bootstrap: [AppComponent]
})
export class AppModule { }

现在，我们可以在其他组件中注入GlobalService，并使用authenticationToken属性来访问全局变量。例如，我们在一个名为HomeComponent的组件中使用authenticationToken变量：

typescript
import { Component } from '@angular/core';
import { GlobalService } from './global.service';
@Component({
  selector: 'app-home',
  template: <code>
    <h1>Welcome to the home page</h1>
    
Authentication token: {{ globalService.authenticationToken }}
  </code>
})
export class HomeComponent {
  constructor(public globalService: GlobalService) { }
}

现在，我们可以在HomeComponent组件的模板中访问authenticationToken变量，并显示它的值。

使用服务是在Angular 2中存储全局变量的最佳方法之一。我们可以创建一个服务，并在应用程序的根模块中提供它，以便在整个应用程序中共享数据。在本文中，我们演示了如何创建一个名为GlobalService的服务，并在另一个组件中使用它来访问全局变量。这个方法可以帮助我们在应用程序的各个部分中轻松地访问和共享数据。