Angular ViewChild не определено, если дочерний объект расширяет базовый класс - PullRequest
0 голосов
/ 01 октября 2018

Я начал с четырех компонентов:

  • 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 о типах двух компонентов поиска.

Полученная ошибка выглядит следующим образом: enter image description here

... и я просто пытаюсь установить свойство для компонента поиска, как только результаты возвращаются в компонент списка, вызывая этот метод:

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 возвращает неопределенное значение.Поэтому, прежде чем выполнить поиск, дочерняя ссылка компонента поиска работает, но после поиска дочерняя ссылка компонента списка на компонент поиска не работает ...

1 Ответ

0 голосов
/ 01 октября 2018

БАММЕР, это оказалось менее интересным, чем я надеялся.В моих подписках на поисковые запросы от пользователя я использовал оператор finalize для наблюдаемой, то есть вызова getUsers, и пытался использовать группу методов, как я могу в C #:

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, чтобы он не включал группу методов, например:

...
    finalize(() => this.resetSearch())
...

..., тогда мой this.userSearch не вернет undefined втело resetSearch.Я сталкивался с проблемой попытки использовать группы методов в машинописи раньше.Иногда они работают, иногда нет, но это тот случай, когда они не работают, и я должен просто прекратить попытки использовать их, я думаю ...

...