Question

我有2个组成部分。一个仅是形式，另一种是形式的输出。用户点击提交按钮后，我想将数据从表单组件发送到输出组件。

这是我尝试过的：

form.service.ts

  private listOfFoundedMatches;

  // Set list of founded matches
  setListOfFoundedMatches(value) {
    this.listOfFoundedMatches = value;
  }

  // Get list of founded matches
  getListOfFoundedMatches() {
    return this.listOfFoundedMatches;
  }

form.component.ts

  constructor(private formService: FormService) {}
  onSubmit() {
     this.formService.setListOfFoundedMatches(data);
  }

这是我尝试接收数据的方式：

output.component.ts

  constructor(private matchResult: FormService) {}

  ngOnInit() {
    console.log(this.matchResult.getListOfFoundedMatches());
  }

事实是，我确实收到了数据，但只收到了一次。我想要的是每次用户提交表单时都接收数据。我该怎么办？

Answer 1

您可以使用Subject或BehaviorSubject（不同之处在于BehaviorSubject始终保存最后一个值）。

form.service.ts

  private listOfFoundedMatches: BehaviorSubject<any> = new BehaviorSubject(null);
  public listOfFoundedMatches$:Observable<any> = this.listOfFoundedMatches.asObservable();
  // Set list of founded matches
  setListOfFoundedMatches(value) {
    this.listOfFoundedMatches.next(value);
  }

  // Get list of founded matches
  getListOfFoundedMatches() {
    return this.listOfFoundedMatches.value;
  }

form.component.ts 等于

  constructor(private formService: FormService) {}
  onSubmit() {
     this.formService.setListOfFoundedMatches(data);
  }

output.component.ts

  constructor(private matchResult: FormService) {}

  ngOnInit() {
    this.matchResult.listOfFoundedMatches$.subscribe() {
       (listOfFoundedMatches) => {
              console.log(listOfFoundedMatches);
        }
    }
  }

这样，每次用户单击“提交”按钮时，FormService将触发一个Observable事件，并且output.component.ts将获取最后发出的值。另外，如果要获取最后保存的值，可以调用：formService.getListOfFoundedMatches（）。

提交时：将数据从一个组件发送到另一组件

1 个答案: