如何使用 Angular 9 和 NGRX 在子组件中获取数据？

Question

我正在使用 Angular 9 和 NGRX 创建一个项目，并且我有以下页面组件：

@Component({
  template: `
    <div *ngFor="let post of posts$ | async">
      {{ post.name }}
    </div>
    <top-posts></top-posts>
  `
})
export class PostsPageComponent {

  posts$: Observable<Post[]> = this.store.select(state => state.posts);

  constructor(private store: Store<{ posts: Post[] }>) {}

  ngOnInit() {
    this.store.dispatch({ type: '[Posts Page] Load Posts' });
  }

}

在这个组件中，我有一个显示 TopPosts 的子组件。

我认为我应该将 topPosts: Post[] 添加到我的商店和一个操作“[帖子页面] 加载热门帖子”。

但是我应该如何在我的子组件中访问这些数据？

我应该在子组件中注入商店并使用：

 this.store.dispatch({ type: '[Posts Page] Load Top Posts' });

我应该将数据从 PostPageComponent 传递到 TopPostsComponent 吗？

怎么样？在这种情况下，我应该将操作更改为“[Top Posts Component] Load Top Posts'吗？

Answer 1

在我看来，您可以在父组件中分派子组件的操作，并将结果作为 @Input 传递给子组件。

这样您的子组件就不需要对商店有任何依赖，并且可以充当展示组件。

如何使用 Angular 9 和 NGRX 在子组件中获取数据？

How to get data in Child Components using Angular 9 and NGRX?

ngrx

angular

angular9