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

loading...


1

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

例如我从这个链接获取的数据: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数据都应该显示在新组件(子)中 .

simple我想跟踪子组件中所选数据的click事件 . 并且表在父组件中呈现 .

附件是我的数据表 .

loading...

1回答

  • 1

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

    变化:

    In parent Component:

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

    In Child Component:

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

暂时没有评论!