Angular 5在父组件上单击按钮时，将单击事件中的数据从父组件传递到子组件 [英] Angular 5 Pass data on click event from parent component to child component on button clicked at parent component

问题描述

我在表中绑定了一些数据，单击任何特定的按钮我想向当前单击的对象显示更多相关数据到另一个组件(子组件)中

例如，我从此链接获取的数据: http://jsonplaceholder.typicode.com/users

HTML代码:

<table>
  <thead>
    <th>
      Id
    </th>
    <th>
      name
    </th>
    <th>
      username
    </th>
    <th>
      email
    </th>
    <th>
      street
    </th>
    <th>
      suite
    </th>
    <th>
      zipcode
    </th>
    <th>
      phone
    </th>
    <th>
      website
    </th>
    </thead>
  <tbody>
    <tr *ngFor="let data of httpdata"> 
      <td>{{data.id}}
      </td> 
      <td>{{data.name}}
      </td> 
      <td>{{data.username}}
      </td> 
      <td>{{data.email}}
      </td> 
      <td>{{data.address.street}}
      </td> 
      <td>{{data.address.city}}
      </td> 
      <td>{{data.address.suite}}
      </td> 
      <td>{{data.address.zipcode}}
      </td> 
      <td>{{data.phone}}
      </td> 
      <td>{{data.website}}
      </td> 
      <td>
        <a routerLink="/conflict-details/conflict" (click)="onSelect(data)">Go to 
        </a> 
      </td> 
    </tr>
  </tbody>
</table>

如果您在单击任何特定数据时看到表格中有一个转到按钮，它应该向我显示有关当前点击次数的完整信息 但是在我的情况下，当我单击转到时，我想将数据绑定到另一个组件中，以明确所有td数据都应显示在新的组件(子组件)中.

简单，我想跟踪子组件中选定数据的点击事件.并且表格在父组件中呈现.

随附的是我的数据表.

解决方案

尝试一下

在HTML中 更新

<a routerLink="/conflict-details/conflict" (click)="onSelect(data)">Go to 
        </a> 

到

<a (click)="onSelect(data)">Go to 
            </a> 

在父组件中

import { Router } from '@angular/router';

export class ParentComponent implements OnInit {
   constructor(private router: Router) {
   }
   onSelect(data) {
      this.router.config.find(r => r.component == ChildComponent).data = data;
      this.router.navigate(["/conflict-details/conflict"]);
   }
}

在子组件中

import { ActivatedRoute } from '@angular/router';

export class ChildComponent implements OnInit {
   SentItem : any;
   constructor(private router: ActivatedRoute) { }
   ngOnInit() {
      this.router.data.subscribe(r=>this.SentItem =r);
  }
}

i have some data bind in table and on click of any specific i want to show current clicked object more related data in to another component(child component)

for example the data I'm taking from this link: http://jsonplaceholder.typicode.com/users

HTML Code:

<table>
  <thead>
    <th>
      Id
    </th>
    <th>
      name
    </th>
    <th>
      username
    </th>
    <th>
      email
    </th>
    <th>
      street
    </th>
    <th>
      suite
    </th>
    <th>
      zipcode
    </th>
    <th>
      phone
    </th>
    <th>
      website
    </th>
    </thead>
  <tbody>
    <tr *ngFor="let data of httpdata"> 
      <td>{{data.id}}
      </td> 
      <td>{{data.name}}
      </td> 
      <td>{{data.username}}
      </td> 
      <td>{{data.email}}
      </td> 
      <td>{{data.address.street}}
      </td> 
      <td>{{data.address.city}}
      </td> 
      <td>{{data.address.suite}}
      </td> 
      <td>{{data.address.zipcode}}
      </td> 
      <td>{{data.phone}}
      </td> 
      <td>{{data.website}}
      </td> 
      <td>
        <a routerLink="/conflict-details/conflict" (click)="onSelect(data)">Go to 
        </a> 
      </td> 
    </tr>
  </tbody>
</table>

if you see there is one go to button i have in table when i click on any specific data it should show me complete info about current clicked but in my case i want to bind the data in another component when i click on go to for specific that all td data should be display in new component(child).

simple i want to track click event for selected data in child component . and the table is rendered in parent component.

attached is the data table I have.

解决方案

try this

In HTML update

<a routerLink="/conflict-details/conflict" (click)="onSelect(data)">Go to 
        </a> 

to

<a (click)="onSelect(data)">Go to 
            </a> 

In Parent Component

import { Router } from '@angular/router';

export class ParentComponent implements OnInit {
   constructor(private router: Router) {
   }
   onSelect(data) {
      this.router.config.find(r => r.component == ChildComponent).data = data;
      this.router.navigate(["/conflict-details/conflict"]);
   }
}

In Child Component

import { ActivatedRoute } from '@angular/router';

export class ChildComponent implements OnInit {
   SentItem : any;
   constructor(private router: ActivatedRoute) { }
   ngOnInit() {
      this.router.data.subscribe(r=>this.SentItem =r);
  }
}

这篇关于Angular 5在父组件上单击按钮时，将单击事件中的数据从父组件传递到子组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！