angular - Angular5 2方式服务之间的绑定

问题描述

我是 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();
  }
}

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

有谁知道为什么会发生这种情况？

此服务不在AppModulebtw 中，它在 my 中声明，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.');
  }
}

标签： angular

angular - Angular5 2方式服务之间的绑定

问题描述

解决方案

推荐阅读