Bolehkah saya menggunakan @ViewChild untuk menetapkan fokus pada kawasan teks tertentu?

Question

Saya mempunyai apl sudut hadapan dan saya ingin menetapkan fokus kepada kawasan teks tertentu dan meminta kursor berkelip dan bersedia untuk pengguna menaip dalam kawasan teks apabila ia dimuatkan.

Selepas melakukan googling, saya fikir @ViewChild mungkin pilihan yang tepat. Tetapi setakat ini saya dapat membuatnya berfungsi.

Ini adalah keseluruhan fail ts kendiri saya:

import { Component, ElementRef, ViewChild } from '@angular/core';


@Component({
  selector: 'my-app',
  template: `
    <h1>Hello from {{name}}!</h1>
    <textarea #reference placeholder="Start typing"></textarea>
  `
})
export class App {

  @ViewChild('reference') textarea: ElementRef<HTMLTextAreaElement> | undefined;
  name = 'Angular';

  ngAfterViewInit(): void {
    this.textarea?.nativeElement.focus();
  }

}

Answer 1

Perkara pertama ialah lulus pilihan yang betul kepada @ViewChild:

@ViewChild('myinput', {read: ElementRef})

Jika tidak, anda akan mendapat contoh komponen dan bukannya nod dom.

Jika anda tidak mempunyai sebarang arahan struktur seperti *ngIf/*ngFor maka anda juga boleh lulus {static: true, read: ElementRef}，它将使elementRef在ngOnInit中可用，否则你必须使用AfterViewInit

Answer 2

Saya rasa kod itu tidak berfungsi kerana nativeElement belum lagi berada dalam DOM. Kerja-kerja berikut (anda harus melihat dalam konsol (test1) bahawa nativeElement adalah batal pada permulaan ngAfterViewInit). Mungkin anda perlu menambah 1000ms:

ngAfterViewInit(): void {
    // nativeElement is null
    console.log('test1',this.textarea?.nativeElement);
    setTimeout(() => {
            // nativeElement is not null
            console.log('test2',this.textarea?.nativeElement);
            this.textarea?.nativeElement.focus();
}, 1000);

}

Cara yang lebih menentukan untuk menunggu nativeElement muncul dalam DOM diterangkan di sini (daripada setTimeout): Biarkan fungsi menunggu elemen itu wujud