Question

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

我的问题是，如何将数据，特别是用户在材料对话框组件上输入的数字传递给另一个组件，以便它可以获取api调用结果，或者如何将我的响应对象传递给我的编辑来自对话？

E.g。

这是我的搜索功能：

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
      });
}

Answer 2

我的问题是，我如何通过数据，特别是数字用户在material dialog component上输入了另一个组件

您可以传递它抛出材质对话框组件。将dialogRef注入对话框中打开的组件：

constructor(
   public dialogRef: MatDialogRef<SomeComponent>,   
   @Inject(MAT_DIALOG_DATA) public data: any,    
  ) { }

提交数据后，您可以通过关闭对话框将任何数据传递给打开此对话框的组件：

  onSubmit() {
    this.service.postProduct(this.contract, this.product)
      .subscribe(resp => {
        this.dialogRef.close(resp);
      });

  }

在您的Parent组件中，打开此对话框的人可以通过订阅afterClosed() observable来获取此传递的数据：

<强> Parent.component.ts：

openDialog(id) {
    const dialogRef = this.dialog.open(SomeComponent, {

      data: { id: anyData}
    });
    dialogRef.afterClosed().subscribe(result => {
      if (result) {
         // do something...
      }
    });
  }

我会在dialog.open（）中传递数据对象吗？我该如何检索它从那里？

请看上面的openDialog()。它具有data属性，您可以将其发送到对话框组件。在打开的组件中注入MAT_DIALOG_DATA：

@Inject(MAT_DIALOG_DATA) public data: any,

访问传递的data对象，如上面的代码所示

Official docs[sharing-data-with-the-dialog-component]

Answer 3

如果你想传递你必须路由帮助的数据来定义路由，它将值作为路径的一部分，如下所示

const appRoutes: Routes = [
  { path: 'hero/:id',      component: HeroDetailComponent },];

它将来自代码方

gotoHeroes(hero: Hero) {
  let heroId = hero ? hero.id : null;
  // Pass along the hero id if available
  // so that the HeroList component can select that hero.
  // Include a junk 'foo' property for fun.
  this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }]);
}

阅读：https://angular.io/guide/router#router-imports

如果要在两个组件之间传递数据，则角度中存在@Input和@Output属性概念，允许您在组件之间传递数据。

@Input() - 此类属性允许您将数据从父组件传递到子组件。

Output() - 此类属性允许您将数据从子组件传递到父组件。

其他方法是使用Service在组件之间使用相同的服务实例。

阅读：3 ways to communicate between Angular components

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

3 个答案: