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

Question

我正在尝试从 QuizService 获取字符串变量解释文本的值，以使用数据绑定(bind)在我的 di-quiz 组件模板中显示。 console.log 显示解释文本未定义，并且当选择答案时，与模板的数据绑定(bind)不会显示解释文本的任何内容。请参阅: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

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

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

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

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