Angular 4: Wie Wert von Array aktualisieren in einer anderen Komponente von einer anderen Komponente

Question

posts.component.ts - dies im Router Auslass im AppComponent

PostsComponent { 
    posts: any = [ 
      { 
       'id': 1, 
       'comment': 'Blah blah blah', 
       'is_liked': false, 
       'like_count' = 24, 
      }, 
      { 
       'id': 2, 
       'comment': 'Yeah yeah yeah!', 
       'is_liked': false, 
       'like_count' = 24, 
      } 
     ] 
} 

Pfosten-controls.component.ts geladen wird - Diese ist das Kind der FooterComponent

PostControlsComponent { 
    likePost('post_id'){ 
     //What do I do here 
    } 
} 

Wenn ich diese Methode likePost (1) ausführen; Wie aktualisiere ich 'is_liked' auf 'true' und inkrementiere 'like_count' um 1 in der PostsComponent?

Answer 1

können Sie die Output Dekorateur aus @angular/core in Ihrem PostConrtolsComponent verwenden ein Ereignis an die übergeordneten Komponente zu emittieren, wie:

@Output() 
public onPostLiked = new EventEmitter<string>(); 
... 
public likePost(postId: string) { 
    this.onPostLiked.emit(postId); 
} 

Und eine onPostLiked Methode implementieren, Rechenblatt mit postId die Gleichen von der Post aktualisiert.

public onPostLiked(postId: string) { 
    let postToModify = this.posts.find(post => post.id === postId); 
    if(postToModify) { 
    postToModify.is_liked = true; 
    postToModify.like_count += 1; 
    // send some post request to backend to inform abount post count updated 
    } 
} 

(. OT: mit Kamel-Fall (zB like_count => likeCount) für Ihre Objektattribute betrachten)

Und für Ihre html etwas wie folgt aus:

<post-controls (onPostLiked)="onPostLiked($event)"></post-controls> 

Für weitere Informationen Komponenteninteraktion können Sie dies lesen: https://angular.io/guide/component-interaction

Und auch sollten Sie über die Verwendung eines Redux-Ansatz über @ngrx denken um den Anwendungsstatus an einem Ort zu halten (es ist einfacher zu debuggen und Sie können einfach die onPush ChangeDetectionStrategy verwenden).

https://medium.com/front-end-hacking/managing-state-in-angular-apps-with-ngrx-store-and-ngrx-effects-part-1-a878addba622