Question

我有一个父MatHorizontalStepper组件，该组件使用subscribe检查服务内部的Observable是否已从false更新为true。如果观测值已更改，它将自动移至步进器的下一步。

但是，我似乎无法获得更新以正确更改步骤。以下是我创建的两个组件。

父组件

import { Component, OnInit, ViewChild } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { MatHorizontalStepper } from '@angular/material';
import 'rxjs/observable/of';

// Services
import { StepperService } from './services/stepper.service';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

    export class AppComponent implements OnInit {

      @ViewChild('stepper') mainStepper: MatHorizontalStepper;

      constructor(
        private stepperService: StepperService
      ) { }

      ngOnInit() {
        console.log('Migration Service launched.');
        this.stepperService.stageOne.subscribe((result) => {
          if (result) {
            console.log('Moving to stage 2.');
            this.mainStepper.selectedIndex = 1;
          }
        });

      }

    }

服务

该服务检查组件内部的表单何时完成，并使用formComplete更新相关阶段。

import { Injectable, OnChanges, SimpleChanges, ViewChild } from '@angular/core';
import { MatHorizontalStepper } from '@angular/material/stepper';
import { FormGroup } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import 'rxjs/observable/of';

export class StepperService {
  @ViewChild('stepper') stepper: MatHorizontalStepper;

  // A stage is either incomplete (false) or complete (true).
  stageOne: Observable<boolean> = Observable.of(false);

  // Function receives FormGroup from other component
  formComplete(recievedForm: FormGroup, recievedStepper: MatHorizontalStepper) {
    if (recievedForm.status === 'VALID') {
      switch (recievedStepper.selectedIndex) {
        case 1:
          this.stageOne = Observable.of(true);
          console.log('Stage one complete.');
          break;

        default:
          break;
      }
    }
  }

}

我该怎么做才能确保父组件获得服务中可观察对象的已更改状态？

Answer 1

stageOne的Observable永远不会发出false之外的任何东西：

 Observable.of(false)

创建一个可观察对象，当您订阅它时会发出false，然后立即完成。

您在这里做什么：

this.stageOne = Observable.of(true);

不使其发出任何东西。它用另一个代替了可观察的。该组件已订阅原始可观察对象，并且由于原始可观察对象立即完成，因此已立即取消订阅。即使未取消订阅，它也不起作用：它订阅了原始订阅，而不是新订阅。

要使可观察对象在需要时发出某些东西，您需要一个主题：

stageOne = new Subject<boolean>();

[...]

this.stageOne.next(true);

Angular：如何检查服务中的布尔值是否已更新？

1 个答案: