Angular 2 - Wählen Sie ein Objekt aus dem DOM und setzen Sie den Fokus

Question

Ich kann so etwas in der Dokumentation oder Google Beispiele finden.

Ich habe viele Eingabefelder in ein Div und ich muss eine bestimmte programmgesteuert auswählen. Wie es geht ?

So etwas wie

<div> 
<input type="text" name="txt1" /> 
<input type="text" name="txt2" /> 
<input type="text" name="txt3" /> 
<input type="text" name="txt4" /> 
<input type="text" name="txt5" /> 
<input type="text" name="txt6" /> 
</div> 
<button (click)="selectSample()" /> 

selectSample() { 
    ?????????('txt3').focus(); 
    console.log('Button pressed, txt3 has been selected'); 
} 

Answer 1

@Component({ 
    selector: 'my-app', 
    template: ` 
<div> 
<input #input type="text" name="txt1" /> 
<input #input type="text" name="txt2" /> 
<input #input type="text" name="txt3" /> 
<input #input type="text" name="txt4" /> 
<input #input type="text" name="txt5" /> 
<input #input type="text" name="txt6" /> 
</div> 
<button (click)="selectSample()">click</button> 
` 
}) 
export class App { 
    @ViewChildren('input') inputs; 

    selectSample() { 
    // console.debug(this.inputs.toArray().find((e) => { 
    // return e.nativeElement.getAttribute('name') == 'txt3'; 
    //}).nativeElement.value); 

    this.inputs.toArray().find((e) => { 
     return e.nativeElement.getAttribute('name') == 'txt3'; 
    }).nativeElement.focus(); 

    } 
} 

Plunker example

Answer 2

Werfen Sie einen Blick auf die ViewChild (und ViewChildren wie Gunter schlägt) Anmerkungen.

Sie können etwas tun:

@Component({ 
    selector: 'samples', 
    template: ` 
    <div> 
     <input type="text" name="txt1"> 
     <input type="text" name="txt2"> 
     <input type="text" name="txt3" #input3> 
     <input type="text" name="txt4"> 
     <input type="text" name="txt5"> 
     <input type="text" name="txt6"> 
    </div> 
    <button (click)="selectSample()">select</button>` 
})  
export class SamplesComponent { 

    @ViewChild('input3') input3:ElementRef; 

    constructor(private _renderer : Renderer) {} 

    public selectSample() { 
    //as per Eric's suggestion 
    this._renderer.invokeElementMethod(this.input3.nativeElement, 'focus', []); 
    } 
} 

Answer 3

Hier ist eine Richtlinie Implementierung pro Erics Vorschlag:

@Directive({selector: 'input'}) 
export class MyInput { 
    constructor(private _elRef:ElementRef, private _renderer:Renderer) {} 
    focusIf(attrValue:string) { 
    console.log(this._elRef.nativeElement.getAttribute('name')) 
    if(this._elRef.nativeElement.getAttribute('name') === attrValue) { 
     this._renderer.invokeElementMethod(this._elRef.nativeElement, 'focus', []); 
     return true; 
    } 
    return false; 
    } 
} 

@Component({ 
    selector: 'my-app', 
    directives: [MyInput], 
    template: `<div> 
     <input type="text" name="txt1"> 
     <input type="text" name="txt2"> 
     <input type="text" name="txt3"> 
     <input type="text" name="txt4"> 
     <input type="text" name="txt5"> 
     <input type="text" name="txt6"> 
    </div> 
    <button (click)="selectSample()">click</button>` 
}) 
export class AppComponent { 
    @ViewChildren(MyInput) inputs; 
    constructor() { console.clear(); } 
    selectSample() { 
    this.inputs.toArray().some(myInput => 
     myInput.focusIf('txt3')); 
    } 
} 

Plunker

I der Richtlinie Ansatz mögen, weil wir don Sie müssen #input nicht zum HTML hinzufügen, und die Direktive weiß, wie sie sich selbst konzentriert.

Ich verwendete Array.some(), nur um etwas effizienter zu sein.

Answer 4

Mein Ansatz wäre, sich auf eine Direktive und ihren Selektor zu verlassen, die Notwendigkeit der Iteration über ein Array zu beseitigen und die lokalen Variablen zu vermeiden (Ich mag die Idee nicht, zu viele davon aus meiner Sicht zu haben)), wie Mark erwähnte.

Ich gehe davon aus, dass der Benutzer immer nur eine wollen und es ist hardcoded, das ist genug für den Fall der Benutzer gefragt. Ein dynamisches Element zu fokussieren würde diesen Ansatz zunichte machen.

Die Richtlinie

@Directive({ 
    selector : 'input[type=text][name=txt3]' 
}) 
class Input { 
    constructor(public renderer: Renderer, public elementRef: ElementRef) {} 

    focusMe() { 
    this.renderer.invokeElementMethod(this.elementRef.nativeElement, 'focus', []); 
    } 
} 

Die Komponente würde in jeder grundsätzlich die gleichen sein beantworten

export class App { 
    @ViewChild(Input) input: Input; 

    selectSample() { 
    this.input.focusMe(); 
    } 
} 

Hier ist die plnkr.