如何从 Angular 组件中的服务获取字符串值？

Question

我正在尝试从我的 QuizService 获取字符串变量 explanationText 的值，以使用数据绑定显示在我的 di-quiz 组件模板中。 console.log 显示 explanationText 未定义，并且在选择答案时，模板的数据绑定未显示 explanationText 的任何内容。请参阅：https://stackblitz.com/edit/angular-9-quiz-app

知道为什么这不起作用吗？请你帮忙。谢谢！

在我的 quiz.service.ts 文件中，我有：

@Injectable({providedIn: 'root'}) {
  export class QuizService {
  explanationText: string;
  ...

  setExplanationAndCorrectAnswerMessages() {
    this.question = this.getQuestion;
    if (this.question) {
      if (this.correctAnswers.length === 1) {
        this.explanation = ' is correct because ' + this.question.explanation + '.';
      }
      if (this.correctAnswers.length > 1) {
        this.explanation = ' are correct because ' + this.question.explanation + '.';
      }
    }

    if (this.correctAnswers && this.correctAnswers.length === 1) {
      const correctAnswersText = this.correctAnswers[0];
      this.explanationText = 'Option ' + correctAnswersText + this.explanation;
      console.log(this.explanationText);
      this.correctAnswerMessage = 'The correct answer is Option ' + this.correctAnswers[0] + '.';
      console.log(this.correctAnswerMessage);
    }
    if (this.correctAnswers && this.correctAnswers.length > 1) {
      if (this.correctAnswers[0] && this.correctAnswers[1]) {
        const correctAnswersText = this.correctAnswers[0] + ' and ' + this.correctAnswers[1];
        this.explanationText = 'Options ' + correctAnswersText + this.explanation;
        console.log(this.explanationText);
        this.correctAnswerMessage = 'The correct answers are Options ' + correctAnswersText + '.';
        console.log(this.correctAnswerMessage);
      }
      ...
    }
  }

在我的 di-quiz.component.ts 中，我有一个 getter/setter 和构造函数如下：

get explanation(): string { return this.quizService.explanationText; };
@Input() set explanation(value: string) { this.explanationText = value; };

constructor(private quizService: QuizService,
            private timerService: TimerService,
            private route: ActivatedRoute) {
  this.explanationText = this.explanation;
  console.log("ExpTxt: " + this.explanationText);
}

在我的 di-quiz.component.html 中，我有

<section id="question" [class.answered]="answer">
  <span *ngIf="!answer">{{ question?.questionText }}</span>
  <span *ngIf="answer">{{ explanationText }}</span>
</section>

Answer 1

像这样更改上面的构造函数，

constructor(
  private quizService: QuizService,
  private timerService: TimerService,
  private route: ActivatedRoute
  ) {
     this.explanation = 'Text you want';
     this.explanationText = this.explanation;
     console.log("ExpTxt: " + this.quizService.explanationText);
}

Answer 2

我检查了您的 stackblitz 代码并发现了问题。这是因为您正在 DependencyInjectionQuizComponent 和 QuestionComponent 中注册您的 QuizService，这会创建多个实例。

因此，当问题组件触发时 setExplanationAndCorrectAnswerMessages 它会更新不同实例中的解释文本，但您的 DIQuizComponent 期望来自不同实例。

要解决此问题，您必须从 QuestionComponent 提供程序中删除 QuizService。

我已经分叉并更新了代码。这是link

如何从 Angular 组件中的服务获取字符串值？

How do I get a string value from service in an Angular component?

dependency-injection

typescript

angular-services

angular2-databinding

angular