Служба модуля Angular 5 Core не определена в функциональном модуле

Я следую руководству по стилю в проекте Angular 5 и пытаюсь реализовать самую сложную часть руководства по стилю (основные / общие модули). Поэтому я хочу, чтобы мой основной модуль предоставлял одноэлементную службу, которая используется во всех моих приложениях. Сервис является просто оберткой для LocalStorage. Итак, я создал модуль Core Module и добавил сервис в массив провайдеров следующим образом:

Core Module

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

Что я пропустил? заранее спасибо

2 ответа

Решение

Как уже упоминалось в комментарии к вопросу, это была проблема контекста JavaScript, а не проблема Angular, поэтому я изменил inputChange метод использования функции стрелки ES6, и он работал как шарм.

Посмотрите на этот пост. Предоставить модуль основных одноэлементных сервисов в Angular 2

Я думаю, что это решит вашу проблему.

Другие вопросы по тегам