我的订阅似乎无法在组件上正确完成，即使服务被正确调用也是如此

Question

我不确定我是否理解为什么我的订阅没有正确完成。

这是服务：

import { Injectable } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Subject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})

export class FormService {
    private $formSubject: Subject<FormGroup> = new Subject<FormGroup>();
    private testForm: FormGroup = this.fb.group({
       foo: [null, Validators.required],
       bar: [null, Validators.required]
    });

  constructor(
    private fb: FormBuilder
  ) {
    this.$formSubject.next(this.testForm)
  }

  getForm(): Observable<FormGroup> {
    console.log('It gets to the getForm in the service...')
    return this.$formSubject.asObservable();
  }
}

下面是应该订阅表单的组件：

import { Component, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { Subscription } from 'rxjs';
import { FormService } from './app-form.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {
  isLoading: boolean = false;
  private formSub: Subscription;
  form: FormGroup;

  constructor(private formService: FormService) {}

  ngOnInit(): void {
    this.isLoading = true;
    this.formSub = this.formService.getForm()
      .subscribe(
        (form: FormGroup) => {
          console.log(form);
          this.form = form;
          this.isLoading = false;
        }
      )
  }

  ngOnDestroy(): void {
    this.formSub.unsubscribe();
  }
}

我创建了一个 Stackblitz 来复制这个问题：https://stackblitz.com/edit/angular-trd3iq

对于标准行为，我期望将变量 isLoading 设置为 false 并让 dom 反映它（使用 'done!'）。

我也希望在 component.ts 中打印 console.log。

编辑：我刚刚更改了 BehaviorSubject 的 Subject 并且它起作用了...我不确定是否完全理解为什么它不会像之前介绍的那样起作用。

Answer 1

你的服务构造函数会在你的 component ngOnInit 被调用之前被调用很多，这意味着你是在它发出后订阅主题。

使用 BehaviorSubject 更改 Subject 并且不在构造函数中发出但使用 testForm 初始化应该可以解决问题。

private $formSubject: Subject<FormGroup> = new BehaviorSubject<FormGroup>(this.testForm);

Stackblitz

我的订阅似乎无法在组件上正确完成，即使服务被正确调用也是如此

My subscription can't seem to complete correctly on the component, even though the service is called correctly

service

subject

observable

rxjs

angular