如果子级扩展基类，则未定义Angular ViewChild

Question

我从四个方面入手：

• UserListComponent
• UserSearchComponent
• GroupListComponent
• GroupSearchComponent

两个列表组件均通过装饰ViewChild引用其相应的搜索组件。例如，UserListComponent的属性定义如下：

@ViewChild(UserSearchComponent)
userSearch: UserSearchComponent;

两个列表组件和搜索组件是如此相似，我开始研究如何使组件扩展基类，以使我 D id而不是 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的{​​{1}}最初并不是未定义...，我订阅的是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返回未定义。因此，在执行搜索之前，搜索组件的子引用有效，但是在搜索之后，列表组件对搜索组件的子引用不起作用...

Answer 1

BUMMER，这最终变得不那么有趣了。在订阅用户的搜索请求时，我在可观察对象上使用finalize运算符，即对getUsers的调用，并尝试使用类似C＃中的方法组： / p>

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。我之前遇到过尝试在打字稿中使用方法组的问题。有时它们起作用，有时却不起作用，但这是当它们不起作用时的一种情况，我应该停止尝试使用它们，我认为...