angular5中的组件内部如何用aot提供服务？

Question

我遇到了错误

question-images.service.ts(5,2): Error during template compile of 'QuestionImagesService' Only initialized variables and constants can be referenced in decorators because the value of this variable is needed by the template compiler in 'Injectable' 'Injectable' references 'Injectable' 'Injectable' references 'Injectable' 'Injectable' is not initialized at ..\@angular\core\src\di\metadata.ts(138,22)

这是组件

import { Component, OnChanges, OnInit } from '@angular/core';
import { SafeHtml } from '@angular/platform-browser';
import { QuestionImagesService } from '@app/patient/components/assesment/questions/question-images.service';
import { QuestionBase } from '@app/patient/components/assesment/questions/question.base';

@Component({
  selector: 'ez-slider-question',
  templateUrl: './slider-question.component.html',
  styleUrls: ['./slider-question.component.scss'],
  providers: [QuestionImagesService]
})
export class SliderQuestionComponent extends QuestionBase implements OnInit, OnChanges {
  minValue: number;
  maxValue: number;
  value: number;
  smallStep: number;
  imageId = 0;
  images: { [key: number]: SafeHtml } = {};

  constructor(private questionImagesService: QuestionImagesService) { super(); }

  ngOnInit() {
    this.minValue = 1;
    this.smallStep = 1;
    this.maxValue = this.question.answers.length;
    this.value = this.question.userAnswers[0]
      ? Number(this.question.answers.find(answer => answer.id === this.question.userAnswers[0].id).value)
      : this.minValue;
    this.images = this.questionImagesService.startLoadingImages(this.question);
  }

  getNewUserAnswerValues(): string[] {
    return [this.value.toString()];
  }

  onValueChange(value: number) {
    this.imageId = this.question.answers.find(answer => answer.value === value.toString()).id;
  }

这是服务

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core/src/core';
import { SafeHtml, DomSanitizer } from '@angular/platform-browser';

@Injectable()
export class QuestionImagesService {
    private images: { [key: number]: SafeHtml } = {};

    constructor(private httpClient: HttpClient, private domSanitizer: DomSanitizer) { }

    startLoadingImages(question: IQuestion): { [key: number]: SafeHtml } {
        this.images = {};
        question.answers.forEach(answer => {
            if (answer.imageUrl) {
                this.httpClient.get(`http://localhost:54531/${answer.imageUrl}`, { responseType: 'text' })
                    .subscribe(imageHtml => this.images[answer.id] = this.domSanitizer.bypassSecurityTrustHtml(imageHtml));
            }
        });
        return this.images;
    }
}

执行 ng serve --aot 期间出现错误。我尝试 google 并使用服务工厂，但没有成功。我想以这种方式提供服务，因为我想每个组件都有一个实例。您知道如何实现吗？

Answer 1

问题是您从 QuestionImagesService 中的错误路径导入 Injectable。将导入更改为：

import { Injectable } from '@angular/core';

angular5中的组件内部如何用aot提供服务？

How to provide service inside the component in angular 5 with aot?

singleton

angular-aot

angular5