Question

我有一个CommentBoxComponent，它显示包含PostComponent中帖子的所有评论。我正在通过@Input字段从包含的父组件中获取帖子的ID。
CommentBoxComponent的想法是为帖子的每个评论显示一个CommentComponent。
我试图通过编写一个惰性选择器来实现这一点，该选择器将接收帖子的ID并返回过滤后的评论。
问题是，当我在组件的构造函数中设置惰性选择器时，尚未设置输入ID。
如果我尝试在ngOnChanges中设置惰性选择器，则为时已晚，选择已经进行。

这是组件的代码：

@Component({ ... })
export class CommentBoxComponent {
    @Input() 
    post: Post;

    comments$: Observable<Comment[]>;     

    constructor(private store: Store) { 
        let filter = filterFn => filterFn(this.post.id); // this.post is undefined at this stage

        this.comments$ = this.store.select(CommentState.postComments).pipe(map(filter));
    }
}

这是选择器的代码：

@Selector()
static postComments(state: CommentStateModel) {
    return (postId: string) => {
        return state.comments.filter(comment => comments.postId === postId);
    };
}

有什么建议吗？

Answer 1

您应该只可以在此处使用ngOnInit来初始化comments$。

调用它时，将完成所有@Input的绑定，因此将设置this.post的值。

ngOnInit() { 
 this.comments$ = this.store.select(CommentState.postComments)
   .pipe(
      map(fn => fn(this.post.id))
    );
}

此处的生命周期详细信息OnInit

Answer 2

我发现了这个错误，所以我在这里分享，以防万一有兴趣的人。
我以为在构造之后调用store.select不起作用是错误的（这让我感到震惊，与在ngOnChanges期间调用它没有什么不同）。

事实证明，选择工作正常，但未得到任何结果的原因是我没有在选择之前调度FetchComments操作。这意味着我总是得到0条命令...

我只想澄清一下，在这种情况下，进行选择的正确位置是在@Input的设置器中，或者在ngOnChanges期间，您可以验证输入有效。
如果您尝试将选择内容放在ngOnInit中，那么在异步初始化的情况下，@Input可能尚未初始化。

NGXS使用输入值作为id来过滤惰性选择器

2 个答案: