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 летуч здесь. Он выводится правильно во время перехвата жизненного цикла, но при изменении размера окна он становится нулевым. Нет camelCase problem, нет conditional dom, так что случилось с кодом?

Answer 1

Проблема связана с тем, как вы регистрируете обработчики событий.

С

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

this внутри resetSidebar не указывает на AppSidebar класса больше.

Использование .bind(this) для обеспечения this продолжает работать

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

Вы также можете использовать функции стрелок https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions

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