オブジェクトをあるコンポーネントから別のコンポーネントに角度で渡す方法

Question

私はangular2バージョンで作業しています。私は編集ボタンがあるグリッドを持っています。編集をクリックするたびに他のコンポーネントを表示し、そのオブジェクトをそのコンポーネントに渡す必要があります。私の見解は以下の通りである：今

<table class="table table-striped" width="50%"> 
    <tr> 
    <td>User Name</td> 
    <td>Email</td> 
    <td>Gender</td>  
    <td></td> 
    </tr> 
    <tr *ngFor="let user of Users"> 
    <td>{{user.UserName}}</td> 
    <td>{{user.Email}}</td> 
    <td>{{user.Gender | transformgender }}</td> 
    <td><a routerLink="/edituser" routerLinkActive="active">Edit</a></td> 
    </tr> 
</table> 
<a class="btn btn-primary" routerLink="/adduser" routerLinkActive="active">Add User</a> 

どのようにすることができ、他のコンポーネントと呼ばれるedituser.component.tsへのパス、ユーザーオブジェクト。 お勧めします。

Answer 1

：あなたはちょうどその 'タグにfuncionを結合して、このようなその関数内のすべてのナビゲーションや他のユーザ選択を行う必要があり

<td><a routerLink="/edituser" routerLinkActive="active">Edit</a></td> 

。 users.component.tsで

<td><a (click)="editThisUser()" routerLinkActive="active">Edit</a></td> 

：users.component.htmlで

`

// add Router to the top of the component 
    import { Router } from '@angular/router'; 
//...... some other codes....// 
//in the component class 
    constructor(private router: Router) {} 
//and define the function that you bind in the users.component.html 
    editThisUser(): void { 
    this.router.navigate(['/edituser', this.selectedUser.id]); 
    }` 

更なる情報については、私はあなたが公式の角度を確認することをお勧め英雄チュートリアル：https://angular.io/docs/ts/latest/tutorial/toh-pt6.html

Answer 2

データを保持する非常に基本的なサービスをセットアップしますか？ ： - ユーザー(click)=setUserSelected(user)を設定するためにクリックしたときにそのよう

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

@Injectable() 
export class UserSelectedService { 
    public userSelected: any = {}; 
} 


@Component({ 
    selector: 'user-view', 
    templateUrl: 'user-view.html', 
    styleUrls: ['user-view.scss'] 
}) 

export class UserViewComponent implements OnInit { 

    public user: any; 

    constructor(private _userSelectedService: UserSelectedService) {} 

    public ngOnInit() { 
     this.user = this._userSelectedService.userSelected; 
    } 

} 

そして、HTMLを編集します。これに代えて