typescript - 为什么我的服务未定义？

Question

我正在尝试将服务注入(inject)我的一个类，但我无法使用它，因为它是“未定义的”。

symbolPicker.ts

import {EditorService} from './editor.service';

import * as QuillNamespace from 'quill';
let Quill: any = QuillNamespace;
const Keyboard = Quill.import('modules/keyboard');

export interface Config {
  container: string;
  selector: 'equals'|'implies'|'followsFrom';
}

export interface QuillInstance {
  on: Function;
  getText: Function;
}

export default class SymbolPicker {
  quill: QuillInstance;
  options: Config;

  constructor(quill, options, private editorService: EditorService) {
    this.quill = quill;
    this.options = options;

    const container = document.querySelector(this.options.container);

    switch (this.options.selector) {
      case 'equals': {
        container.addEventListener('click', function() {
          console.log('FRANK: EQUALS PRESSED');
          quill.insertText(quill.getSelection(), '=            〈  〉');
          console.log('EDITOR SERVICE: ' + this.editorService);
          this.editorService.toggleHideSymbols();
        });
        break;
      }
      case 'implies': {
        container.addEventListener('click', function() {
          console.log('FRANK: IMPLIES PRESSED');
          quill.insertText(quill.getSelection(), '=>            〈  〉');
          this.editorService.toggleHideSymbols();
        });
        break;
      }
      default: {
        console.log('FRANK: selectionChoice set to non-understood value (' + this.options.selector + ')');
        container.addEventListener('click', function() {
          quill.insertText(quill.getSelection(), '\nINVALID STRING');
          this.editorService.toggleHideSymbols();
        });
        break;
      }
    }
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { AppComponent } from './app.component';

import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';

import { FooterComponent } from './footer/footer.component';

import { environment } from './../environments/environment';
import { BibleComponent } from './components/bible/bible.component';
import {BibleService} from './components/bible/bible.service';
import { ScrollableDirective } from './directives/scrollable.directive';
import { NavbarComponent } from './components/navbar/navbar.component';
import { BibleFilterPipe } from './pipes/bible-filter.pipe';

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import { TheoremsListComponent } from './components/theorems-list/theorems-list.component';
import { EditorComponent } from './components/editor/editor.component';
import {RouterModule} from '@angular/router';
import {routerConfig} from './router.config';
import { AboutComponent } from './components/about/about.component';
import { HomeComponent } from './components/home/home.component';
import { AboutUserComponent } from './components/about-user/about-user.component';

import { QuillModule } from 'ngx-quill';
import { AutocompleteBoxComponent } from './components/autocomplete-box/autocomplete-box.component';
import { SymbolPickerComponent } from './components/symbol-picker/symbol-picker.component';
import {SymbolPickerService} from './components/symbol-picker/symbol-picker.service';
import { EditorFormComponent } from './components/editor-form/editor-form.component';
import {EditorService} from './components/editor/editor.service';
import {SymbolPicker} from './components/editor/symbolPicker';

@NgModule({
  declarations: [
    AppComponent,
    BibleComponent,
    FooterComponent,
    ScrollableDirective,
    NavbarComponent,
    BibleFilterPipe,
    TheoremsListComponent,
    EditorComponent,
    AboutComponent,
    HomeComponent,
    AboutUserComponent,
    AutocompleteBoxComponent,
    SymbolPickerComponent,
    EditorFormComponent
  ],
  entryComponents: [ // Components that are added dynamically to page
    EditorComponent,
    AutocompleteBoxComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule,
    AngularFireAuthModule,
    NgbModule.forRoot(),
    ReactiveFormsModule,
    QuillModule,
    RouterModule.forRoot(routerConfig)
  ],
  providers: [BibleService, SymbolPickerService, EditorService, SymbolPicker],
  bootstrap: [AppComponent, BibleComponent, FooterComponent, NavbarComponent,
    EditorComponent, HomeComponent, AboutComponent, AboutUserComponent]
})
export class AppModule { }

我在我的构造函数(我的 SymbolPicker 类)中初始化我的 editorService 并在文件顶部导入该服务，但是当我打印出该服务或尝试使用它时，它返回未定义。关于为什么的任何想法？

Answer 1

您正在使用

this.editorService.toggleHideSymbols();

这个。将其替换为..

this.editorService.toggleHideSymbols().subscribe();

并检查控制台

this.editorService.toggleHideSymbols(data => {
   console.log(data);
});