ViewChild는

Question

가 보자 크기 조정 이벤트 기간 동안 정의되지 않습니다

import { 
    Component, OnInit, ViewEncapsulation, Input, ElementRef, ViewChild, AfterViewInit 
} from '@angular/core'; 

@Component({ 
    selector: 'app-sidebar', 
    template: ` 
    <aside #sidebar> 
    Sidebar 
    </aside>`, 
}) 
export class AppSidebar implements OnInit, AfterViewInit { 
    @ViewChild('sidebar') 
    private sidebar: ElementRef; 

    constructor() { 
    } 

    ngOnInit() { 
    console.log('OnInit has:', this.sidebar) 
    window.addEventListener('resize', this.resetSidebar); 
    } 

    ngAfterViewInit() { 
    console.log('AfterViewInit has:', this.sidebar); 
    } 

    resetSidebar() { 
    console.log(this.sidebar); 
    } 
} 

this.sidebar 여기 휘발성이다. 라이프 사이클 후크 중에 올바르게 로그 아웃하지만, 창 크기를 조정하면 null이됩니다. 아니 camelCase problem, 아니 conditional dom, 그래서 코드가 잘못 됐어?

Answer 1

이 문제는 이벤트 처리기를 등록하는 방법으로 인해 발생합니다. resetSidebar 내부

window.addEventListener('resize', this.resetSidebar); 

this와

더 이상 AppSidebar 클래스를 가리 키지 않습니다. this을 보장하기 위해

사용 .bind(this)

당신은 또한 화살표 기능 https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions

window.addEventListener('resize', (event) => this.resetSidebar(event);