Góc 2/4 tập trung vào yếu tố đầu vào

Question

Làm cách nào để đặt tiêu điểm cho đầu vào bằng sự kiện (nhấp)? Tôi có chức năng này tại chỗ nhưng tôi rõ ràng thiếu một cái gì đó (newbie góc đây)

sTbState: string = 'invisible'; 
private element: ElementRef; 
toggleSt() { 
    this.sTbState = (this.sTbState === 'invisible' ? 'visible' : 'invisible'); 
    if (this.sTbState === 'visible') { 
    (this.element.nativeElement).find('#mobileSearch').focus(); 
    } 
} 

Answer 1

thử điều này:

trong bạn HTML file:

<button type="button" (click)="toggleSt($event, toFocus)">Focus</button> 

<!-- Input to focus --> 
<input #toFocus> 

trong ts của bạn Tệp:

sTbState: string = 'invisible'; 

toggleSt(e, el) { 
    this.sTbState = (this.sTbState === 'invisible' ? 'visible' : 'invisible'); 
    if (this.sTbState === 'visible') { 
    el.focus(); 
    } 
} 

Answer 2

Bạn có thể sử dụng trình trang trí @ViewChild cho việc này. Tài liệu có tại https://angular.io/api/core/ViewChild.

Dưới đây là một plnkr làm việc: http://plnkr.co/edit/KvUmkuVBVbtL1AxFvU3F

ý chính này của mã đi xuống đến, đưa ra một tên cho yếu tố đầu vào của bạn và dây lên một sự kiện click trong mẫu của bạn.

<input #myInput /> 
<button (click)="focusInput()">Click</button> 

Trong thành phần của bạn, thực hiện @ViewChild hoặc @ViewChildren để tìm kiếm các phần tử (s), sau đó thực hiện xử lý nhấp chuột để thực hiện chức năng bạn cần.

export class App implements AfterViewInit { 
    @ViewChild("myInput") inputEl: ElementRef; 

    focusInput() { 
    this.inputEl.nativeElement.focus() 
    } 

Bây giờ, hãy nhấp vào nút và sau đó dấu nháy mắt sẽ xuất hiện bên trong trường nhập. Việc sử dụng ElementRef không được khuyến nghị là rủi ro bảo mật, như các cuộc tấn công XSS (https://angular.io/api/core/ElementRef) và vì nó dẫn đến các thành phần ít cầm tay hơn.

Cũng hãy cẩn thận rằng, biến số inputEl sẽ có sẵn lần đầu tiên khi xảy ra sự cố ngAfterViewInit sự kiện.