-1

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

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

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

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

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

4

2 回答 2

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]
})

您初始化一个新的 Service 实例,并且您的预期全局isLoggedIn将在此组件中拥有它自己的实例。

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

更多关于依赖注入的信息在这里。

于 2017-10-10T21:22:38.253 回答
0

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

于 2017-10-10T21:10:32.867 回答