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: ` Hello from {{name}}!
` }) export class App { @ViewChild('reference') textarea: ElementRef | undefined; name = 'Angular'; ngAfterViewInit(): void { this.textarea?.nativeElement.focus(); } }
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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中可用，否则你必须使用AfterViewInitSaya 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