Служба модуля 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
Я думаю, что это решит вашу проблему.