Question

我正在遵循Angular 5项目中的样式指南，我正在尝试实现样式指南中最难的部分（核心/共享模块）。所以我希望我的核心模块提供在我的所有应用程序中使用的单例服务。该服务只是LocalStorage的包装器。因此，我创建了CoreModule，并将服务添加到providers数组中，如下所示：

CoreModule

import { NgModule, Optional, SkipSelf } from '@angular/core';
import { CommonModule } from '@angular/common';

import { LocalStorageService } from './local-storage.service';

@NgModule({
  imports: [
    CommonModule,
  ],
  exports: [
    CommonModule,
  ],
  providers: [ LocalStorageService ],
  declarations: [ ]
})
export class CoreModule {
  constructor( @Optional() @SkipSelf() parentModule: CoreModule) {
    if (parentModule) {
      throw new Error('CoreModule has already been loaded. You should only import Core modules in the AppModule only.');
    }
  }
}

MyLazyComponent

import { Component, OnInit, Input, Output, ViewChild } from '@angular/core';

import { LocalStorageService } from '@app/core/local-storage.service';

@Component({
  selector: 'app-my-lazy',
  templateUrl: './my-lazy.component.html',
  styleUrls: ['./my-lazy.component.scss']
})
export class MyLazyComponent implements OnInit {

  constructor(private localStorageService: LocalStorageService) { }

  ngOnInit() {
    this.debounceValues();
  }

  inputChange(data) {
    this.localStorageService.setItem('saveData', data);
  }

  debounceValues() {
    this.form.valueChanges
      .debounceTime(1000)
      .distinctUntilChanged()
      .subscribe(this.inputChange);
  }
}

之后，我想在功能模块中使用LocalStorageService，因此我导入了它，并使用正常的DI方式将其注入构造函数中。不幸的是，我得到TypeError: this.localStorageService is undefined

我错过了什么？提前致谢

Answer 1

正如问题评论中提到的那样，这是一个JavaScript上下文问题而不是Angular问题，因此我将inputChange方法更改为使用ES6箭头功能，它就像魅力一样。 / p>

Answer 2

看一下这篇文章。 Provide core singleton services module in Angular 2

我认为这将解决你的问题。

Angular 5核心模块服务在功能模块中未定义

2 个答案: