如何将表格行的对象数据从一个组件传递到另一个组件答案

【问题标题】：How to pass object data of table row from one component to another component如何将表格行的对象数据从一个组件传递到另一个组件
【发布时间】：2020-06-07 18:36:08
【问题描述】：

我的一个组件上有一个垫表，单击特定行后，该信息应显示给另一个组件。我能够在我的第一页上控制台信息，但无法将该信息移动到另一页。例如“console.log(row)”。全部信息都在“row”参数中

以及如何在我的新组件页面上使用键和值格式打印它

【问题讨论】：

如果我理解正确，那么您只需将row 参数作为道具传递给您需要的子组件。
此链接codementor.io/@theparam/… 可能会对您有所帮助。
@MilindAgrawal 实际上我可以在我的第一个组件上的控制台上以键值格式查看所有行信息，如下所示：vendorID：122，vendorName：“123”，类别：“ABC ", date: "10/01/2019", lastActive: "20/01/2019"} 但我想在我的“组件”的另一个组件上显示它而不是在控制台上
您能分享一些代码以更好地了解您的情况吗？
@MilindAgrawal vendor-total.component.html vendor-total.component.ts displayData(row) { console.log(row); this.router.navigate(["/home/vendor-total/details"]);我想在详细信息组件上以键和值对的形式显示在控制台上显示的“行”数据

标签： angular frontend

【解决方案1】：

您可以使用@Input 装饰器。以下是最小示例和here is the docs.

import { Component, Input } from '@angular/core';

import { Hero } from './hero';

@Component({
  selector: 'app-hero-child',
  template: `
    <p>{{masterName}}</p>
  `
})
export class HeroChildComponent {
  @Input('master') masterName: string; // extracts master attribute
}

和父组件

import { Component } from '@angular/core';

@Component({
  selector: 'app-hero-parent',
  template: `
    <app-hero-child
      [master]="master"> // send string to child component
    </app-hero-child>
  `
})
export class HeroParentComponent {
  master = 'Master';
}

【讨论】：

【解决方案2】：

在行上添加点击功能：

<tr *ngFor="let item of list" (click)="navigate(item)">
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
    </tr>

使用此函数导航到另一个传递状态的路由：

navigate(item): void {
    this.router.navigate(['/item'], {state: {item: item}});
  }

用history 检索状态到另一个组件（不需要导入）：

ngOnInit() {
    console.log(history.state);
  }

【讨论】：