如何使用 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[]添加到我的商店和一個操作“[帖子頁面]加載熱門帖子”。

但是我應該如何在我的子組件中訪問這些數據？

1. 我應該在子組件中注入商店並使用：

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

2. 我應該將 PostPageComponent 中的數據傳遞到 TopPostsComponent 嗎？

   如何？ 在這種情況下，我應該將操作更改為“[Top Posts Component] Load Top Posts”嗎？

Answer 1

在我看來，您可以在父組件中為您的子組件調度操作，並將結果作為@Input 傳遞給您的子組件。

這樣，您的子組件就不需要對 store 有任何依賴，並且可以充當展示組件。