2

我遇到了错误

question-images.service.ts(5,2)：“QuestionImagesService”模板编译期间出错 装饰器中只能引用已初始化的变量和常量，因为“Injectable”“Injectable”中的模板编译器需要此变量的值引用 'Injectable' 'Injectable' 引用 'Injectable' 'Injectable' 未在 ..\@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。我试过谷歌并使用服务工厂，但没有成功。我想以这种方式提供服务，因为我希望每个组件都有一个实例。您知道如何实现这一目标吗？

4

1 回答 1

2

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

import { Injectable } from '@angular/core';
于 2018-08-08T09:04:01.237 回答