コンポーネント間のデータを角4で渡します。

Question

私は、テーブル項目としてグループ項目をリストするリストコンポーネントを持っています。リンクの1つは、ユーザーがアイテムを編集できるようにすることです。編集項目は別のコンポーネントです。ユーザーが編集をクリックすると、既存のデータを編集コンポーネントに渡す必要があります。どうやってやるの？ここ

は、成分が（同じアプリである以外）階層によって関連付けられていない場合、私のリストコンポーネントここ

<div class='table-responsive'> 
    <table class='table' *ngIf='groups && groups.length'> 
     <thead> 
      <tr> 
       <th>Avatar Image</th> 
       <th>Display Name</th> 
       <th>Description</th> 
       <th>Member Count</th> 
       <th>Total Post</th> 
       <th>Last Modify Date</th> 
       <th></th> 
      </tr> 
     </thead> 
     <tr *ngFor='let group of groups | groupFilter:listFilter'> 
      <td><img [src]='group.group_avatar_image' class="img-responsive" style="max-height: 50px;"></td> 
      <td><a [href]='group.url'>{{group.display_name}}</a></td> 
      <td>{{group.description}}</td> 
      <td>{{group.total_members_count}}</td> 
      <td>{{group.total_posts}}</td> 
      <td>{{group.updated_at | date: 'dd/MM/yyyy'}}</td> 
      <td><a href="#" [routerLink]="['/Edit Group']">Edit</a></td> 
     </tr> 
    </table> 
</div> 

私のリストコンポーネント

import { Component, OnInit,Input } from '@angular/core'; 
 
import { Group } from '../groupModel'; 
 
import { GroupsService } from '../groups.service'; 
 

 
@Component ({ 
 
    selector: 'groups-lst', 
 
    moduleId: module.id, 
 
    templateUrl: 'groups-list.component.html' 
 
    //styleUrls: ['groups.component.css'] 
 
}) 
 

 
export class GroupsList implements OnInit{ 
 

 
    constructor(private _groupsService: GroupsService) {} 
 

 
    title: string = 'Groups List'; 
 
    listFilter: string = ''; 
 
    errorMessage: string; 
 
    
 
    groups: Group[]; 
 

 
     ngOnInit():void{ 
 
      this._groupsService.getGroups() 
 
      .subscribe (group => this.groups = group, 
 
      error => this.errorMessage = <any>error); 
 
     } 
 

 
}

Answer 1

もちろんのこと、あなたのアプローチの一つの重要な事があります：

は、ここでは、通知を「聞く」ために必要なすべてのコンポーネントに注入件名サービス、非常にベアボーンの一例です。モデルのインスタンスをルータに渡す方法について考えているようです。これはできませんデザインによって（確かに、仲介者としてサービスを使用するような方法がありますが、それをお勧めしません）。

グリッド内に表示されるレコードには、通常のidプロパティのような識別子が必要な場合があります。最も一般的な方法は、その識別子をパラメータとしてパスに渡し、ソースからエンティティを再度取得することです。

グリッドコンポーネント：あなたはあなたのグループのエンティティを取得するために渡されたパラメータを使用することができますあなたの「編集コンポーネント」で

<tr *ngFor='let group of groups | groupFilter:listFilter'> 
    <td><img [src]='group.group_avatar_image' class="img-responsive" style="max-height: 50px;"></td> 
    <td><a [href]='group.url'>{{group.display_name}}</a></td> 
    <td>{{group.description}}</td> 
    <td>{{group.total_members_count}}</td> 
    <td>{{group.total_posts}}</td> 
    <td>{{group.updated_at | date: 'dd/MM/yyyy'}}</td> 
    <td><a href="#" [routerLink]="['/Edit', group.id]">Edit</a></td> 
</tr> 

：

private route$ : Subscription; 
constructor(private route : ActivatedRoute) {} 

ngOnInit() { 
    this.route$ = this.route.params.subscribe(
    (params : Params) => { 
     let id = params["id"]; 
     // fetch the group entity from service/store 
    }); 
} 

そして、確かに、あなたのルートを設定する必要がありますidパラメータを認識します。

export const routes = [ 
    ... 
    { path : 'Edit/:id', component : ...}, 
    ... 
]; 

Answer 2

ありますサブジェクトへのサブスクリプションを可能にするサービスは、私が通常行く方法です。

コンポーネントが階層（親/子）によって簡単に関連付けられている場合は、出力を使用できます。

このサービスはすべての用途に使用できます。しかし、私は通常、両方を使用して自分自身を見つける。

両方とも（ここでは私がSOに書いた）いくつかのドキュメントとサンプルがたくさんあります。あなたが必要とする情報は、さまざまな質問で確実に利用可能です。この質問が偽の旗を得られなかったなら、私は驚くだろう。

const Notes = { 
    SOME_NAMED_EVENT : 'some_named_event', 
    ... (more named events) 
}; 

class Note { 
    constructor (name = '', data = {}) { 
     this.name = name; 
     this.data = data; 
    } 
} 

// Example of a subscription/notification style service, 
// as opposed to a service that just calls a callback 
class NotifierService { 

    constructor() { 
     let Rx = require ('rxjs'); 
     this.subject = new Rx.Subject (); 
    } 

    subscribe (callback) { 
     return this.subject.subscribe (b => callback (b)); 
    } 

    sendNote (note) { 
     this.subject.next (note); 
    } 
} 
export { NotifierService, Notes, Note }