Question

在Child1组件中，我使用了this.cdRef.detectChanges()。但是当我在同一个父组件上添加Child2组件时。 Child2组件实现AfterViewInit。它给了我异常

TypeError：无法读取属性＆＃39; ngDoCheck＆＃39;在angular2中未定义的。

请建议解决方案。

child1:

export class MainFilterComponent implements AfterViewInit {

constructor(){
 this.cdRef.detectChanges();
}
}


Child2
export class MainCompareComponent implements AfterViewInit {
 constructor(){
 }
}




export class MainFilterComponent implements AfterViewInit {

  countries: Country[] = [];
  filterToggled: boolean = false;
  filter: Filter;
  fromYears: Option[] = [];
  holder: any;
  institutions: Institution[] = [];
  isFullWidth: boolean;
  levels: Option[] = [];
  programs: Program[] = [];
  toYears: Option[] = [];
  stretchBox: any;

  @ViewChild('addBox') addBox: ElementRef;
  @ViewChild('chooselist') list: ElementRef;


  constructor(private translate: TranslateService, private filterService: FilterService, private zone: NgZone,
    private activatedRoute: ActivatedRoute, private router: Router, private elementRef: ElementRef, private renderer: Renderer, private cdRef: ChangeDetectorRef) {
    this.filter = filterService.getFilter();
    this.getCountries();
    this.getLevels();
    this.getInstitutions();
    this.getPrograms();
    this.getYears();
    this.updateFilterFromURL();
    this.filterService.onFilterChanged$.subscribe(filter => this.onFilterChanged(filter));
  }


  ngAfterViewInit(): void {
    jQuery.getScript('./app/components/filter/main-filter.js');
    this.holder = this.list.nativeElement.parentNode.parentNode.parentNode;
    this.stretchBox = this.holder.firstElementChild;
  }


 onFilterChanged(filter: Filter) {
    this.filter = filter;
    this.cdRef.detectChanges();
   if (this.list.nativeElement.children.length > 0) {
     this.renderer.setElementClass(this.list.nativeElement, 'select', true);
   }
   else if (this.list.nativeElement.children.length === 0) {
     this.renderer.setElementClass(this.list.nativeElement, 'select', false);
   }
   this.refreshWidth();

  }


 refreshWidth() {
    var items = this.list.nativeElement.children;
    var listWidth = 0;
    for (var i = 0; i < items.length; i++) {
      listWidth += $(items[i]).outerWidth(true);
    }
    var newWidth;
    if (!items.length || $(this.addBox.nativeElement).outerWidth(true) + (listWidth + ($(this.list.nativeElement).outerWidth(true) - $(this.list.nativeElement).width())) > $(this.holder).width() * 0.7) {
      newWidth = '';
      this.isFullWidth = true;
    }
    else {
      this.isFullWidth = false;
      newWidth = Math.floor((100 - (($(this.addBox.nativeElement).outerWidth(true) + (listWidth +
        ($(this.list.nativeElement).outerWidth(true)
          - $(this.list.nativeElement).width()))) / $(this.holder).width() * 100)) - 1 /** 10*/) /*/ 10*/ + '%';
    }
    this.renderer.setElementStyle(this.stretchBox, 'width', newWidth);
  }

Answer 1

嗯我不太确定但是这可能是由于材料组件上使用的flexLayout而出现的，所以尝试用css框架替换它

TypeError：无法读取属性＆＃39; ngDoCheck＆＃39;在angular2中未定义的

1 个答案: