Angular 9：不订阅其他组件？

Question

我一直在尝试制作一个 Angular 应用程序，它从表单中的提交数据中读取数据并查询到数据库中。我一直在使用 observables 并订阅，但它一直没有工作。我一直在尝试 console.log 提交表单时的可观察数据，但它似乎没有改变。这是代码。

服务

import { Injectable } from '@angular/core';
import {Observable} from 'rxjs';
import {QueryData} from './QueryData';
import {Subject} from 'rxjs';

@Injectable()
export class ForSubmitService {
  private subject = new Subject<QueryData>();
  sendData(data: QueryData) {
    this.subject.next(data);
  }
  getData(): Observable<QueryData> {
    return this.subject.asObservable();
  }
}

发送数据的组件

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

constructor(
    private formBuilder: FormBuilder,
    private submitService: ForSubmitService
  ) {
    this.form = this.formBuilder.group({
      selectedHemisphere: '',
      selectedMonth: this.thisMonth,
      }
    );
  }

  ngOnInit(): void {
  }

  onSubmit(formData) {
    const sendData = {northSelected: formData.selectedHemisphere === 'north',
      monthSelected: formData.selectedMonth};
    const data = new QueryData(sendData.northSelected, sendData.monthSelected);
    this.submitService.sendData(data); // This is the line sending the data
  }

接收数据的组件

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

export class ListComponent implements OnInit {
  listData;
  formData;
  subscription: Subscription;
  constructor(
    private db: AngularFirestore,
    private submitService: ForSubmitService ) {
    this.subscription = this.submitService.getData().subscribe(data => {console.log(data); this.formData = data; });
    // ^^^ This is the code that seems to not work
    console.log(this.formData);
    // console.log(this.subscription);
    // More database related code...
  }

  ngOnInit(): void {
  }

任何帮助将不胜感激。谢谢！！

Answer 1

目前，每个组件都可以看到自己的ForSubmitService 实例。 这是因为您的组件中有这一行：

 providers: [ForSubmitService]

如果ForSubmitService 对您的应用程序来说是全局的，那么将@Injectable 装饰器更改为这样：

@Injectable({
  providedIn: 'root',
})

阅读有关提供商的更多信息：Angular - Providing dependencies in modules