कोणीय 2 + ऑटोफोकस इनपुट तत्व

Question

मैं इनपुट तत्व को ऑटोफोकस कैसे कर सकता हूं? this प्रश्न के समान, लेकिन AngularDart के साथ नहीं। कुछ इस तरह:

<input type="text" [(ngModel)]="title" [focus] /> 
//or 
<input type="text" [(ngModel)]="title" autofocus /> 

क्या Angular2 के पास इस सुविधा के लिए कोई समर्थन है?

बेस्ट क्लोज़ प्रश्न this one है, लेकिन क्या कोई छोटा/आसान समाधान है, क्योंकि मेरे पास "इनपुट बॉक्स की सूची" नहीं है। प्रदान किए गए लिंक में *ngFor="#input of inputs" का उपयोग किया जाता है, लेकिन मेरे पास केवल नियंत्रण इनपुट में 1 इनपुट है।

Answer 1

यह मेरे वर्तमान कोड है:

import { Directive, ElementRef, Input } from "@angular/core"; 

@Directive({ 
    selector: "[autofocus]" 
}) 
export class AutofocusDirective 
{ 
    private focus = true; 

    constructor(private el: ElementRef) 
    { 
    } 

    ngOnInit() 
    { 
     if (this.focus) 
     { 
      //Otherwise Angular throws error: Expression has changed after it was checked. 
      window.setTimeout(() => 
      { 
       this.el.nativeElement.focus(); //For SSR (server side rendering) this is not safe. Use: https://github.com/angular/angular/issues/15008#issuecomment-285141070) 
      }); 
     } 
    } 

    @Input() set autofocus(condition: boolean) 
    { 
     this.focus = condition !== false; 
    } 
} 

उपयोग के मामले:

[autofocus] //will focus 
[autofocus]="true" //will focus 
[autofocus]="false" //will not focus 

पुराने कोड (पुराने जवाब, बस मामले में):
मैं इस कोड के साथ समाप्त हो गया:

import {Directive, ElementRef, Renderer} from '@angular/core'; 

@Directive({ 
    selector: '[autofocus]' 
}) 
export class Autofocus 
{ 
    constructor(private el: ElementRef, private renderer: Renderer) 
    {   
    } 

    ngOnInit() 
    {   
    } 

    ngAfterViewInit() 
    { 
     this.renderer.invokeElementMethod(this.el.nativeElement, 'focus', []); 
    } 
} 

यदि मैं कोड डालता हूं ngOnViewInit में यह काम नहीं करता है। कोड भी सर्वोत्तम प्रथाओं का उपयोग करता है, क्योंकि तत्व पर ध्यान केंद्रित करना सीधे recommended नहीं है।

संपादित (सशर्त ऑटोफोकस):
कुछ दिन पहले मैं, सशर्त ऑटो फोकस की जरूरत है क्योंकि मैं पहले ऑटोफोकस तत्व छिपाने के लिए और मैं एक और ध्यान केंद्रित करना चाहते हैं, लेकिन केवल जब पहली दिखाई नहीं देता है, और मैं इस के साथ समाप्त हुआ कोड:

import { Directive, ElementRef, Renderer, Input } from '@angular/core'; 

@Directive({ 
    selector: '[autofocus]' 
}) 
export class AutofocusDirective 
{ 
    private _autofocus; 
    constructor(private el: ElementRef, private renderer: Renderer) 
    { 
    } 

    ngOnInit() 
    { 
    } 

    ngAfterViewInit() 
    { 
     if (this._autofocus || typeof this._autofocus === "undefined") 
      this.renderer.invokeElementMethod(this.el.nativeElement, 'focus', []); 
    } 

    @Input() set autofocus(condition: boolean) 
    { 
     this._autofocus = condition != false; 
    } 
} 

Edited2:
Renderer.invokeElementMethod is deprecated और नए Renderer2 इसका समर्थन नहीं करता। तो हम मूल फोकस पर वापस आ गए हैं (जो उदाहरण के लिए डीओएम - एसएसआर के बाहर काम नहीं करता है!)।

import { Directive, ElementRef, Input } from '@angular/core'; 

@Directive({ 
    selector: '[autofocus]' 
}) 
export class AutofocusDirective 
{ 
    private _autofocus; 
    constructor(private el: ElementRef) 
    { 
    } 

    ngOnInit() 
    { 
     if (this._autofocus || typeof this._autofocus === "undefined") 
      this.el.nativeElement.focus();  //For SSR (server side rendering) this is not safe. Use: https://github.com/angular/angular/issues/15008#issuecomment-285141070) 
    } 

    @Input() set autofocus(condition: boolean) 
    { 
     this._autofocus = condition != false; 
    } 
} 

उपयोग के मामले:

<md-input-container> 
    <input mdInput placeholder="Item Id" formControlName="itemId" name="itemId" myAutofocus> 
</md-input-container> 

का विकल्प:

[autofocus] //will focus 
[autofocus]="true" //will focus 
[autofocus]="false" //will not focus 

Answer 2

आप इनपुट तत्व एक टेम्पलेट संदर्भ चर #myInput आवंटित कर सकते हैं:

<input type="text" [(ngModel)]="title" #myInput /> 

अपने घटक को लागू AfterViewInit दो, ViewChild टिप्पणी के साथ तत्व के संदर्भ हड़पने और ngAfterViewInit हुक में अपने तत्व ध्यान केंद्रित:

export class MyComponent implements AfterViewInit { 
    @ViewChild("myInput") 
    private _inputElement: ElementRef; 

    [...] 

    ngAfterViewInit(): void { 
     _inputElement.nativeElement.focus(); 
    } 
} 

Answer 3

autofocus एक मूल HTML सुविधा है जो कम से कम पृष्ठ प्रारंभ करने के लिए काम करनी चाहिए। हालांकि यह कई कोणीय परिदृश्यों के साथ काम करने में विफल रहता है, खासकर *ngIf के साथ।

आप वांछित व्यवहार प्राप्त करने के लिए वास्तव में एक सरल कस्टम निर्देश बना सकते हैं।

import { Directive, OnInit, ElementRef } from '@angular/core'; 

@Directive({ 
    selector: '[myAutofocus]' 
}) 
export class AutofocusDirective implements OnInit { 

    constructor(private elementRef: ElementRef) { }; 

    ngOnInit(): void { 
    this.elementRef.nativeElement.focus(); 
    } 

} 

उपर्युक्त निर्देश मेरे उपयोग के मामलों के लिए काम करता है।

का उपयोग कैसे करें

<input *ngIf="someCondition" myAutofocus /> 

संपादित करें: वहाँ usecases जहां यह जल्दी OnInit जीवन चक्र विधि में ध्यान कॉल करने के लिए करने के लिए है हो रहा है। यदि ऐसा है, तो इसके बजाय OnAfterViewInit पर बदलें।

Answer 4

निम्नलिखित निर्देश मुझे का उपयोग कर कोणीय 4.0.1

import {Directive, ElementRef, AfterViewInit} from '@angular/core'; 

@Directive({ 
    selector: '[myAutofocus]' 
}) 
export class MyAutofocusDirective implements AfterViewInit { 
    constructor(private el: ElementRef) 
    { 
    } 
    ngAfterViewInit() 
    { 
    this.el.nativeElement.focus(); 
    } 
} 

इस तरह इसका इस्तेमाल के लिए काम करता है OnInit जीवन चक्र घटना का उपयोग करने के लिए काम नहीं किया था आर मुझे मैंने दूसरे जवाब में रेंडरर का उपयोग करने का भी प्रयास किया जो मेरे लिए काम नहीं करता था।