如何在 Angular 2+ 中存储常量

Question

这是我之前发布的一个问题的后续问题。

我的问题是关于我在服务上调用方法时得到的奇怪日志输出。console.log输出未打印服务明确定义的数据。事实证明，罪魁祸首是，在调用服务方法时，使用的上下文是进行调用的组件的上下文。

所以我的问题是：在 Angular 2+ 中跨多个组件存储变量的正确方法是什么？

例如，假设我想保留一个变量isLoggedIn。我在哪里保存这个变量？我无法将其保留在服务中，因为当组件调用该服务时（即 authService.getLoggedInStatus() ），它们不一定会得到服务的isLoggedIn值，而是可能获得组件中一个同名变量的值。

那么如何在 Angular 中跟踪共享变量呢？

Answer 1

如果要使全局变量isLoggedIn应用程序中的任何位置可访问，则将其作为单一实例服务放置在@Injectable service中是完全有效的。为了确保它是单例服务，您应该只在app.modules中声明它，例如

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { SingletonService } from './Singleton.service';
@NgModule({
 declarations: [
    AppComponent,
 ],
 imports: [
    BrowserModule,
    FormsModule
 ],
 providers: [SingletonService],
 bootstrap: [AppComponent]
})
export class AppModule { }

如果您还通过以下方式将其添加到组件中：

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
  providers: [SingletonService]
})

初始化新的服务实例，预期的全局isLoggedIn将在此组件中具有自己的实例。

希望这能让您了解如何使用 @Injectable() 以 angular 形式存储全局变量。

有关依赖注入的更多信息，请单击此处。

Answer 2

@Injectable服务是单例的。您可以在声明组件的相关模块上提供此服务。通过在主题组件中注入此服务的依赖项，可以访问其公共属性。因此，您可以共享这些属性及其值