Öğe üzerinde bağlama ile netleme nasıl ayarlanır?

Question

Angular2 öğesi üzerinde odaklamayı nasıl ayarlayabilirim. Bunu elementRef ile ayarlamak istemiyorum. Ben angularjs düşünüyorum böyle yönerge

Answer 1

Basit 'odak' kullanarak yapıcı enjekte alır

this.renderer.invokeElementMethod(this.input.nativeElement, 'focus', []); 

Yönergesi

import {Directive, Input, ElementRef} from 'angular2/core'; 
@Directive({ 
    selector: '[focus]' 
}) 
class FocusDirective { 
    @Input() 
    focus:boolean; 
    constructor(@Inject(ElementRef) private element: ElementRef) {} 
    protected ngOnChanges() { 
     this.element.nativeElement.focus(); 
    } 
} 

// Usage 
@Component({ 
    selector : 'app', 
    template : ` 
     <input [focus]="inputFocused" type="text"> 
     <button (click)="moveFocus()">Move Focus</button> 
    `, 
    directives: [FocusDirective] 
}) 
export class App { 
    private inputFocused = false; 
    moveFocus() { 
     this.inputFocused = true; 
     // we need this because nothing will 
     // happens on next method call, 
     // ngOnChanges in directive is only called if value is changed, 
     // so we have to reset this value in async way, 
     // this is ugly but works 
     setTimeout(() => {this.inputFocused = false}); 
    } 
} 

Answer 2

angular2 sahip bir öğenin netlik ayarı en iyi yolu var Renderer kullanarak ve eleman üzerindeki bir yöntemi çağırmak tarafından olmasıdır Angular2 yılında ngFocus direktifi yoktur. elementRef olmadan bunu yapmanın bir yolu yoktur. Böyle bir şeye

Bu sonuçlar: rendererprotected renderer : Renderer

Answer 3

Çok daha basit bir yolu:

import { Directive, ElementRef, Renderer} from "@angular/core"; 
@Directive({ 
    selector: "[Focus]" 
}) 

export class myFocus { 
    constructor(private _el: ElementRef, private renderer: Renderer) { 
     this.renderer.invokeElementMethod(this._el.nativeElement, 'focus'); 
    } 

} 

Answer 4

Her iki varyantı denedim ancak hiçbiri basit kullanım için uygun değil. İlk olarak (@AngJobs tarafından) yönerge kullandığınız bileşende ek işleve ihtiyaç duyarsınız (set = true), 2. (@ShellZero ile) hiç çalışmıyor çünkü odaklama gerçekten görünümden önce çağrılır. Bu yüzden odak aramayı ngAfterViewInit'a taşıdım. Şimdi sadece <input focus...'u ekleyebilir ve unutabilirsiniz. Eleman, otomatik olarak init görüntülendikten sonra odaklanacaktır.

import { Directive, ElementRef, Renderer, AfterViewInit } from '@angular/core'; 
@Directive({ 
    selector: '[focus]' 
}) 

export class DmFocusDirective implements AfterViewInit { 
    constructor(private _el: ElementRef, private renderer: Renderer) { 
    } 

    ngAfterViewInit() { 
     this.renderer.invokeElementMethod(this._el.nativeElement, 'focus'); 
    } 
} 

Answer 5

Benim için çalışır, ancak konsolda hatalar var. Hata ayıklama ve aramadan sonra bu makaleyi okuyun: https://www.picnet.com.au/blogs/guido/post/2016/09/20/angular2-ng2-focus-directive/

Yalnızca kopyala yapıştır. Benim için mükemmel çalıştı.

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

@Directive({selector: '[focus]'}) 
export class FocusDirective implements AfterViewInit, DoCheck { 
    private lastVisible: boolean = false; 
    private initialised: boolean = false; 

    constructor(private el: ElementRef) { 
    } 

    ngAfterViewInit() { 
     console.log('inside FocusDirective.ngAfterViewInit()'); 
     this.initialised = true; 
     this.ngDoCheck(); 
    } 

    ngDoCheck() { 

     console.log('inside FocusDirective.ngDoCheck()'); 

     if (!this.initialised) { 
      return; 
     } 
     const visible = !!this.el.nativeElement.offsetParent; 
     if (visible && !this.lastVisible) { 
      setTimeout(() => { 
       this.el.nativeElement.focus(); 
      }, 1); 
     } 
     this.lastVisible = visible; 
    } 
} 

Answer 6

Oluşturucu hizmeti artık (Açısal 4.x itibariyle) deprecated yeni Renderer2 hizmet invokeElementMethod yok olduğunu. Ne yapabilirsiniz böyle öğeye bir başvuru elde etmektir:

const element = this.renderer.selectRootElement('#elementId'); 

Ve sonra şöyle bu unsura odaklanmaktadır için kullanabilirsiniz:

element.focus(); 

Daha selectRootElementhere nasıl çalıştığı hakkında :

DÜZENLEME: eleman odaklı almaz

ise sık karşılaşılan bir sorun elemanı hazır olmamasıdır. (örneğin: devre dışı, gizli vb.). Bunu yapabilirsiniz:

setTimeout(() => element.focus(), 0); 

Bu yeni VM sırayla çalışacak bir macrotask yaratacak, böylece eleman etkinse odağı düzgün çalışacaktır.

Answer 7

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

@Directive({ 
selector: '[autoFocus]', 
}) 
export class FocusDirective implements AfterViewChecked { 

    constructor(private _elementRef: ElementRef) { } 

    ngAfterViewChecked() { 
    this._elementRef.nativeElement.focus() 
    } 

}