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

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

---

如果我像（1）一样运行这个方法；如何在PostsComponent中将“is_like”更新为“true”并将“like_count”增加1？

您可以使用PostControlsComponent内部的

@angular/core

的

输出
装饰器向父组件发出事件，如：

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

（OT）：考虑使用CAMEL实例（例如，类似于Oracle Cuth=＝LigEnCUT）作为对象属性）
对于您的HTML，类似于：

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



有关组件交互的更多信息，请阅读以下内容：

此外，您还应该考虑通过
@ngrx
使用redux方法将应用程序状态保持在一个位置（这样更易于调试，并且您可以轻松使用
onPush
ChangeDetectionStrategy）

PostsComponent的html模板是什么样子的？能否显示PostControlsComponent和PostsComponent的整个TypeScript文件，包括@Component注释？PostsComponent和PostsControlComponent不是父子组件。这是否仍然有效？如果他们不是父子关系，您可以使用相同的方法将事件传递到树上，或者使用一个服务，该服务的方法可以使用id
postId
来喜欢帖子。对于该服务，请查看此处：并阅读我的答案中的第一个链接（部分：
父子通过服务进行通信
）
<post-controls (onPostLiked)="onPostLiked($event)"></post-controls>