NGXS использует входное значение как идентификатор для фильтрации ленивого селектора - PullRequest
Новая
       9

NGXS использует входное значение как идентификатор для фильтрации ленивого селектора

0 голосов
/ 27 марта 2019

У меня есть CommentBoxComponent, который отображает все комментарии к посту, содержащему PostComponent.Я получаю идентификатор сообщения из родительского компонента, содержащего его, через поле @Input.
Идея CommentBoxComponent заключается в отображении CommentComponent для каждого комментария к сообщению.
Я пытаюсь добиться этого, написав ленивый селектор, который получит идентификатор сообщения и вернет отфильтрованные комментарии.
Проблема в том, что, пока я устанавливаю ленивый селектор в конструкторе компонента, входной идентификатор имеетеще не установлен.
Если я попытаюсь установить ленивый селектор в 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);
    };
}

Есть предложения?

Ответы [ 2 ]

1 голос
/ 28 марта 2019

Вы должны просто иметь возможность использовать ngOnInit здесь для инициализации comments$.

Когда он вызывается, любые привязки @Input будут завершены, поэтому будет установлено значение для this.post.

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

Подробности жизненного цикла здесь OnInit

0 голосов
/ 28 марта 2019

Я нашел ошибку, так что я делюсь здесь на случай, если кому-то интереснобыть другим, чем звонить во время ngOnChanges).

Оказалось, что выбор работал просто отлично, но причина, по которой я не получил никаких результатов, заключалась в том, что я не отправлял действие FetchComments до выбора.Это означает, что я всегда получаю 0 комментариев назад ...

Я просто хочу уточнить, что в таком случае правильное место для выбора - либо в установщике @Input, либо во время ngOnChanges, где вы можете проверить, является ли значение ввода допустимым.
Если вы попытаетесь поместить выборку в ngOnInit, @Input, возможно, еще не инициализировался бы в случае асинхронной инициализации.

...