Übergeben Sie Daten zwischen Komponenten in Angular 4

Question

Ich habe Listenkomponente, die Gruppenelement als Tabelle auflisten. Einer der Links ist, dass Benutzer Artikel bearbeiten können. Element bearbeiten ist eine separate Komponente. Wenn der Benutzer auf Bearbeiten klickt, muss ich vorhandene Daten übergeben, um die Komponente zu bearbeiten. Wie kann ich das machen?

Hier ist meine Liste Komponente

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

Hier ist meine Liste Komponente

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

Es ist eine wichtige Sache, um Ihren Ansatz zu erwähnen. Es scheint, als ob Sie über eine Möglichkeit nachdenken, eine Instanz Ihres Modells an den Router zu übergeben. Dies ist nicht möglich von Design (sicher gibt es Möglichkeiten wie die Verwendung eines Dienstes als Vermittler, aber nicht empfehlen, dass).

Sie sollten darüber nachdenken, dass Ihre im Raster angezeigten Datensätze (wie eine gewöhnliche id-Eigenschaft) möglicherweise Bezeichner haben (und sollten). Die gängigste Vorgehensweise besteht darin, diese Kennung als Parameter an die Route zu übergeben und die Entität erneut von der Quelle abzurufen.

Grid-Komponente:

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

In Ihrer "bearbeiten Komponente" Sie die übergebenen Parameter können Sie Ihr Unternehmen der Gruppe holen:

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

Und für sicher, dass Sie benötigen, um Ihre Route konfigurieren um den id Parameter zu erkennen:

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

Answer 2

Wenn Komponenten nicht durch Hierarchie verwandt sind (anders als in der gleichen App ist) Ein Dienst, der Subskriptionen erlaubt, ist die Art, wie ich normalerweise gehe.

Wenn Komponenten leicht durch Hierarchie (Eltern/Kind) verbunden werden können, können Sie Ausgaben verwenden.

Beachten Sie, dass der Dienst für alles verwendet werden kann. Normalerweise benutze ich jedoch beide.

Es gibt eine TON Dokumentation und Stapel von Samples auf beiden (einige davon habe ich hier auf SO geschrieben). Die Informationen, die Sie benötigen, sind definitiv in einer Vielzahl von Fragen verfügbar. Ich wäre überrascht, wenn diese Frage nicht eine dumme Flagge bekommen würde.

Hier ist ein sehr nackte Knochen Beispiel für einen Gegenstand, den Sie weiterhin in jede Komponente injizieren, die „hören“, eine Benachrichtigung muss:

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 }