web-dev-qa-db-ja.com

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>

特定のデータをクリックしたときにテーブルにある[Go to]ボタンが1つある場合、現在のクリックに関する完全な情報が表示されますが、私の場合、[Go to]をクリックすると、別のコンポーネントにデータをバインドします。すべてのtdデータが新しいコンポーネント（子）で表示される必要があること。

シンプル子コンポーネントの選択したデータのクリックイベントを追跡したい。テーブルは親コンポーネントにレンダリングされます。

if you can see in this screenshot i can bind the data in same component ,

添付は私が持っているデータテーブルです。

the table where i have bind the data

angular5angular-event-emitter
4
Amit Golhar

@Input および @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;

親コンポーネントの2つの関数：

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);
}
2
Prashant Pimpale

これを試して

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);
  }
}
2
Mostafa Sayed