TypeError：angular2の未定義の 'ngDoCheck'プロパティを読み取れません

Question

Child1コンポーネントでは、this.cdRef.detectChanges()を使用しました。しかし、同じ親コンポーネントにChild2コンポーネントを追加すると、 Child2コンポーネントはAfterViewInitを実装します。それは私に例外を与える

TypeError: Cannot read property 'ngDoCheck' of undefined in 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のフレームワーク