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）;如何将'is_liked'更新为'true'并在PostsComponent中将'like_count'递增1？

Answer 1

您可以使用PostControlsComponent中Output的{{1}}装饰器向父组件发出事件，如：

@angular/core

并实施@Output() public onPostLiked = new EventEmitter<string>(); ... public likePost(postId: string) { this.onPostLiked.emit(postId); }方法，该方法使用onPostLiked更新帖子的内容。

postId

（OT：考虑使用camel-case（例如like_count =＆gt; likeCount）作为对象属性）

对于您的HTML类似的东西：

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

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

而且你应该考虑通过<post-controls (onPostLiked)="onPostLiked($event)"></post-controls>使用redux方法将应用程序状态保存在一个地方（它更容易调试，你可以轻松使用@ngrx ChangeDetectionStrategy）。

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

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

1 个答案: