Question

我是Angular的新手（已经使用AngularJs几年了）。我正在尝试使用服务在组件之间共享数据。

我的服务如下：

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

import { CategoryService } from '../../core/services/category.service';
import { Question } from '../../core/models/question';

@Injectable()
export class StepsService {
  category: string
  questions: Question[]
  completed = {
    stepOne: false,
    stepTwo: false,
    stepThree: false
  };

  constructor(
    private categoryService: CategoryService
  ) { }

  init(category) {
    this.category = category;
    this.categoryService.questions(category, 'Answers.Formulas').subscribe(questions => {
      this.questions = questions;
      this.completedStepOne();
      this.completedStepTwo();
      this.completedStepThree();
    });
  }

  completedStepOne() {
    this.questions.forEach(question => {
      if (question.type === 0) {
        return question.answers.forEach(answer => {
          if (answer.active) {
            console.log('step 1');
            this.completed.stepOne = true
          }
        });
      }
    });
  }

  completedStepTwo() {
    this.questions.forEach(question => {
      if (question.type === 1 && question.active) {
        console.log('step 2');
        this.completed.stepTwo = true;
      }
    })
  }

  completedStepThree() {
    this.questions.forEach(question => {
      if (question.type === 1) {
        question.answers.forEach(answer => {
          if (answer.active) {
            console.log('step 3');
            this.completed.stepThree = true;
          }
        })
      }
    })
  }
}

当我在组件中使用此服务时，它们似乎可以正确显示所有内容。在第一个组件上，我有一个更新 Questions 活动属性的方法。看起来像这样：

setAnswer(question: Question, selected: Answer, e: Event) {
  question.answers.forEach(function (answer) {
    answer.active = answer.id === selected.id;
  });
  this.stepService.completedStepOne();
  e.preventDefault();
}

除非completed.stepOne设置为true，否则我在组件上有一个隐藏的按钮。当我选择一个答案时，会出现一个按钮，告诉我2种方式的绑定正在起作用。但是，当我转到第二个组件时，我有这个提示：

import { Component, OnInit } from '@angular/core';

import { listAnimation } from '../../core/animations/animations';
import { StepsService } from '../shared/steps.service';
import { Question } from '../../core/models/question';

@Component({
  selector: 'piiick-two',
  templateUrl: './two.component.html',
  styleUrls: ['./two.component.scss'],
  animations: [listAnimation]
})
export class TwoComponent implements OnInit {
  category: string;
  questions: Question[];
  completed: any;

  constructor(
    private stepService: StepsService
  ) { }

  ngOnInit() {
    this.category = this.stepService.category;
    this.questions = this.stepService.questions;
    this.completed = this.stepService.completed;
  }

  setQuestion(question: Question, active: boolean, e: Event) {
    question.active = active;
    console.log(this.questions);
    console.log(this.stepService.questions);
    this.stepService.completedStepTwo();
    e.preventDefault();
  }
}

当我“设置问题”时，我的按钮没有出现。您可以在我的setQuestion方法中使用的2个控制台日志报告不同的内容。第一个显示活动的问题，但是第二个显示未定义的活动。

有人知道为什么会这样吗？

此服务不在AppModule中，它在我的StepsModule中声明，因为仅在此使用过。该模块如下所示：

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

import { StepsRoutingModule } from './/steps-routing.module';
import { OneComponent } from './one/one.component';
import { TwoComponent } from './two/two.component';
import { ThreeComponent } from './three/three.component';
import { ResultsComponent } from './results/results.component';
import { StepsComponent } from './steps.component';
import { CommonModule } from '@angular/common';
import { SharedModule } from '../shared/shared.module';
import { NavigationComponent } from './shared/navigation/navigation.component';
import { StepsService } from './shared/steps.service';

@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    StepsRoutingModule
  ],
  declarations: [OneComponent, TwoComponent, ThreeComponent, ResultsComponent, StepsComponent, NavigationComponent],
  exports: [NavigationComponent],
  providers: [StepsService]
})
export class StepsModule {
  constructor() {
    console.log('StepsModule loaded.');
  }
}

Answer 1

您需要在共享模块的提供程序中添加StepsService，并将其从StepsModule中删除。

Angular5服务之间的2种方式绑定

1 个答案: