Angular2+ @ViewChild返回undefined的解决方法

因为部分组件在ngIf或者ngSwitchCase块中,这样当页面初始化时,因为条件关系,组件并没有被初始化,这时@ViewChild获取的组件类就会是undefined。

要解决这一问题,可以使用@ViewChildren:

import { Component, ViewChildren, QueryList } from '@angular/core';
import { MyComponent } from './mycomponent';


@Component({
  selector: 'page-test',
  template: `<my-component #myComponent></my-component>`
})
export class PageTest {
  @ViewChildren('myComponent') myComp: QueryList<MyComponent>;

  //在ngAfterViewInit事件中订阅组件变化事件
  ngAfterViewInit() {
    this.myComp.changes.subscribe((item) => {
      this.myComp.first.init_func();
    });
  }
  
  //或者在ngAfterContentInit事件中订阅组件变化事件
  ngAfterContentInit() {
    this.myComp.changes.subscribe((item) => {
      this.myComp.first.init_func();
    });
  }
}

网上查到的解决方案,一种是在ngAfterViewInit事件中订阅组件变化事件,另一种是在ngAfterContentInit事件中订阅组件变化事件。暂不清楚两者的差异和优劣。

关于@ViewChild和@ViewChildren的区别:

ViewChild 装饰器用于获取模板视图中的元素,它支持 Type 类型或 string 类型的选择器,同时支持设置 read 查询条件,以获取不同类型的实例。而 ViewChildren 装饰器是用来从模板视图中获取匹配的多个元素,返回的结果是一个 QueryList 集合。

参考链接:

https://leftstick.github.io/tech/2016/04/19/5-rookie-mistakes-to-avoid-with-angular-2

https://stackoverflow.com/questions/40427748/viewchild-always-returns-undefined

https://segmentfault.com/a/1190000008695459

Print Friendly, PDF & Email

留下评论

5 × 2 =

*

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

%d 博主赞过: