typescript - Peristiwa global (window.onresize) tidak mengubah nilai variabel lokal

Peristiwa global (window.onresize) tidak mengubah nilai variabel lokal.

export class TestComponent implements OnInit {
    a: number = 0;
    b: number = 0;
    ngOnInit() {
        window.onresize = () => {
            this.a = 10;
            this.b = 10;
        };
    }
}

Jawaban #1

Terikat pada acara global menggunakan host binding (ini disebutkan dalam dokumentasi API, jauh di dalam halaman DirectiveMetadata):

@Component({
  selector: 'my-app',
  template: `<p>Resize window and look at console log.
    <p>{{a}} {{b}}`
})
export class AppComponent {
  @HostListener('window:resize') onResize() {
    this.a++;
    this.b++;
    console.log(this.a, this.b, event)
  }
}

plunker

Kode asli Anda tidak bekerja karena Anda melakukan monkey-patch pada handler onresize (yang awalnya telah dipatch oleh Angular) ke fungsi Anda sendiri. Jadi, Angular tidak lagi memiliki cara untuk menjalankan deteksi perubahan setelah handler event selesai. Menggunakan host binding menjaga patch Angular tetap ada, sehingga tidak menonaktifkan deteksi perubahan, sehingga tampilan Anda akan diperbarui setelah event resize terjadi.

Jawaban #2

tidak mengubah nilai variabel lokal

Dari tangkapan layar Anda, saya bisa melihat bahwa this.b=10 jadi itu memang mengubah nilai variabel.

Dalam gambar Anda juga melihat a: number=0. Itu hanya nilai dari a sejak breakpoint terakhir. Anda bisa melihat this.a juga 10