Question

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

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

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

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

Answer 1

如果您希望在应用程序中的任何位置保留全局变量isLoggedIn，则将其置于@Injectable service作为singleton服务是完全有效的。为了确保它是单件服务，你应该只在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]
})

您初始化一个新的Service实例，而您想要的全局isLoggedIn将在此组件中拥有它自己的实例。

希望这能让您了解如何使用@Injectable()在角度中存储全局变量。

有关依赖注入的更多信息here.

Answer 2

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

如何在Angular 2+中存储常量？

2 个答案: