Я начал с четырех компонентов:
UserListComponent
UserSearchComponent
GroupListComponent
GroupSearchComponent
Оба компонента списка ссылаются на свой соответствующий поисковый компонент через оформленное свойство ViewChild
.Например, UserListComponent
имеет свойство, определенное следующим образом:
@ViewChild(UserSearchComponent)
userSearch: UserSearchComponent;
Два компонента списка и компоненты поиска были настолько похожи друг с другом, что я начал изучать, как заставить компоненты расширять базовые классы, чтобы D идентификатор не R повтор M сам.Я начал с создания базового класса для компонентов поиска со следующим объявлением:
@Component({
selector: 'td-search',
template: ''
})
export class SearchComponent<T> {
...
}
Как только я расширил два компонента поиска, мои ссылки ViewChild
в обоих случаях в итоге вернули undefined
.Например, вот объявление UserSearchComponent
после введения базового класса:
export class UserSearchComponent extends SearchComponent<UserSearch> {
UserSearch
- это просто класс, который упаковывает доступные параметры поиска в качестве объекта / полезной нагрузки для отправки на сервер.
Таким образом, свойства ViewChild
работают в обоих случаях, пока у меня нет базового класса для двух компонентов поиска.Но как только я представляю базовый класс, я не могу получить справку ViewChild
о типах двух компонентов поиска.
Полученная ошибка выглядит следующим образом:
... и я просто пытаюсь установить свойство для компонента поиска, как только результаты возвращаются в компонент списка, вызывая этот метод:
private resetSearch() {
this.loading = false;
this.userSearch.disabled = false;
}
Вопрос:
Могу ли я использовать базовые классы с компонентами, которые я намерен использовать в качестве ViewChild
ссылок?
Обновление:
Я также понял, что ViewChild
НЕ является неопределенным вначале ... в ngOnInit
из UserListComponent
, я подписываюсь на searches
свойство UserSearchComponent
(типа EventEmitter<UserSearch>
).Это успешно находит UserSearchComponent
, и я подтвердил это, отключив весь объект непосредственно перед вызовом по подписке:
console.log(this.userSearch);
this.userSearch.searches.subscribe((search: UserSearch) => {
this.loading = true;
const params = new UserSearchQueryParams();
params.Login = search.login;
params.Username = search.user;
params.EnabledOnly = search.enabled;
this.users$ = this._users.getUsers(params).pipe(
catchError(this.handleError),
finalize(this.resetSearch)
);
});
В операторе finalize
вызова на getUsers
наблюдаемомresetSearch
где this.userSearch
возвращает неопределенное значение.Поэтому, прежде чем выполнить поиск, дочерняя ссылка компонента поиска работает, но после поиска дочерняя ссылка компонента списка на компонент поиска не работает ...