Angular 4：如何从另一个组件更新另一个组件中数组的值

Question

posts.component.ts - 这个组件是在 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,
            }
        ]
}

posts-controls.component.ts - 这是FooterComponent的子组件

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

如果我运行像这样的方法 likePost(1);，如何在 PostsComponent 中更新 'is_liked' 为 'true' 并将 'like_count' 增加 1？

- Kabelo2ka

---

PostsComponent的HTML模板是什么样子的？您能展示PostControlsComponent和PostsComponent的整个TypeScript文件，包括@Component注释吗？ - Kim Kern

Answer 1

你可以在PostControlsComponent中使用来自@angular/core的Output修饰符来向父组件发出事件，例如：

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

实现一个onPostLiked方法，它会更新帖子postId的点赞数。

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 back-end to inform about post count updated
   }
}

（关于对象属性的命名）建议使用驼峰式命名法（例如like_count => likeCount）。

HTML代码可以这样写：

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

有关组件交互的更多信息，请阅读以下内容：https://angular.io/guide/component-interaction

此外，您应该考虑使用 @ngrx 的 redux 方法将应用程序状态放在一个位置（这样更容易调试，并且可以轻松地使用 onPush ChangeDetectionStrategy）。

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

- cyr_x

---

PostsComponent和PostsControlComponent不是父子组件。这样是否仍然有效？ - Kabelo2ka

如果它们不是父子关系，你可以使用相同的方法将事件传递到树上，或者使用一个具有postId帖子点赞方法的服务。 - cyr_x

服务请查看此处：https://angular.io/tutorial/toh-pt4 并阅读我的回答中的第一个链接（部分：“父子组件通过服务进行通信”）。 - cyr_x