javascript - 如何将数据从一个组件传递到另一个组件以进行编辑？

Question

目前，我有一个模态 Material 对话框窗口，要求用户输入一个数字，然后点击搜索。在搜索时，它从 api 调用中获取数据并取回响应对象。我想使用响应对象来填充新页面(编辑表单)。

我的问题是，我如何将数据，尤其是用户在 Material 对话框组件上输入的数字传递到另一个组件，以便它可以获取 api 调用结果，或者我如何将我的响应对象传递到我的编辑从对话框？

例如

这是我的搜索功能:

search(searchNumber) {
    if (this.selectedOption === 'Bill Number') {
      this._transactionService.findExistingTransactionByBillNumber('U001', searchNumber)
                               .subscribe(data => this.transactionResponse = data);
      console.log(JSON.stringify(this.transactionResponse));

      this.router.navigate(['/edit-transaction-portal']);

    } else {
      this._transactionService.findExistingTransactionByTransactionNumber('U001', searchNumber)
                               .subscribe(data => this.transactionResponse = data);
             console.log(JSON.stringify(this.transactionResponse));
             this.router.navigate(['/edit-transaction-portal']);
      }
    }

我希望能够 1) 传递我在此处获得的响应对象或传递用户输入的 searchNumber，以便我可以在我的编辑表单组件中进行查找。我需要将此组件中的任何一个传递到我导航到的新组件。

编辑:接受的解决方案展示了如何将查询参数添加到 this.router.navigate() 以及如何通过订阅 activateRoute 来检索它，这是一种与其他 SO 帖子中确定的方法不同的方法。

Answer 1

可以传号(账单/交易)

this.router.navigate(['/edit-transaction-portal'], { queryParams: { bill: 'U001' } });
this.router.navigate(['/edit-transaction-portal'], { queryParams: { transaction: 'U001' } });

然后在您的 component(edit-transaction-portal) 中点击 api 获取数据。在组件中，您应该在构造函数中包含 ActivatedRoute。它将是这样的:

isBill: boolean;
isTransaction: boolean;
number: string;
constructor(private route: ActivatedRoute) {}
ngOnInit() {
    this.sub = this.route
      .queryParams
      .subscribe(params => {
        this.isBill = params['bill'] != undefined;
        this.isTransaction = params['transaction'] != undefined;
        this.number = this.isBill ? params['bill'] : params['transaction'];
        // Call API here
      });
}