时间戳

首页 > 解决方案 > Angular 5将单击事件的数据从父组件传递到在父组件单击的按钮上的子组件

angular5 - Angular 5将单击事件的数据从父组件传递到在父组件单击的按钮上的子组件

问题描述

我在表中有一些数据绑定，点击任何特定的我想显示当前点击的对象更多相关数据到另一个组件（子组件）

例如我从这个链接获取的数据：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 数据都应显示在新组件（子）中。

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

如果您可以在此屏幕截图中看到，我可以将数据绑定在同一组件中，

附上我的数据表。

我绑定数据的表

标签： angular5angular-event-emitter

解决方案

您可以使用@Inputand@Output装饰器来实现所需的输出：

变化：

在父组件中：

HTML 代码：

<div>
  <table *ngIf="isVisible === true">
    <tr>
      <th>
        Id
      </th>
      <th>
        name
      </th>
      <th>
        username
      </th>
      <th>
        email
      </th>
    </tr>
    <tr *ngFor="let data of userInformation">
      <td>{{data.id}}
      </td>
      <td>{{data.name}}
      </td>
      <td>{{data.username}}
      </td>
      <td>{{data.email}}
      </td>
      <td>
        <a (click)="onSelect(data)">Go to
        </a>
      </td>
    </tr>
  </table>

  <div *ngIf="isVisible === false">
    <app-test-child [userInfo]="clickedUser" (notify)="backToList($event)"></app-test-child>
  </div>
</div>

TS 代码：

局部变量：

userInformation: any;
isVisible : boolean = true;
clickedUser: any;

父组件中的两个函数：

onSelect(data)
{
   this.isVisible = false;
   this.clickedUser = data;
}

backToList(flag) {
  this.isVisible = flag;
  console.log(flag)
}

在子组件中：

HTML 代码：

<table>
  <tr>
    <th>
      Id
    </th>
    <th>
      name
    </th>
    <th>
      username
    </th>
    <th>
      email
    </th>
  </tr>
  <tr>
    <td>{{clickedUser.id}}
    </td>
    <td>{{clickedUser.name}}
    </td>
    <td>{{clickedUser.username}}
    </td>
    <td>{{clickedUser.email}}
    </td>
    <td>
      <a (click)="backToList()">Back
      </a>
    </td>
  </tr>
</table>

TS 代码：

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


@Input() userInfo: any;
@Output() notify: EventEmitter<any> = new EventEmitter<any>();

clickedUser: any;

constructor() { }

ngOnInit() {
  this.clickedUser = this.userInfo;
}

backToList() {
  var flag = true;
  this.notify.emit(flag);
}

推荐阅读