Eckige 2 - wählen Sie Objekt aus dem DOM und setzen Sie den Fokus

Kann ich ' finden sich solche Sache in der Dokumentation oder google Beispiele.

Habe ich so viele input Felder in ein div und ich brauche, um ein zu wählen, insbesondere programmgesteuert. Wie es zu tun ?

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');
}

versuchen Sie, eine Referenz, die mit java-Skript wie document.getElementByid('') oder post-code zu machen, mehr klar
Es ist Eckig 2, Pardeep
Sieht aus wie stackoverflow.com/questions/34522306/...
Schauen Sie auch auf meine Antwort hier. Es ist nicht abhängig von der Komponente, wo Sie es verwenden möchten.

InformationsquelleAutor Marco Jr | 2016-03-31

angular

@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 Beispiel

ViewChildren(Eingang) Eingänge; <-- Eingang ist nicht definiert
Vielen Dank, habe ich es entdeckt, während der Plunker. Wenn Sie im Voraus wissen (build-time) Sie wollen <input name="txt3"> dann @PierreDuc s Ansatz besser ist. Wenn Sie dynamisch wählen, basiert auf den Namen, ist mein Ansatz besser laufen könnte.
Ja...Es muss dynamisch sein, so Ihr Ansatz ist mehr angeeignet. Habe ich nur verwendet, txt3 als Beispiel.
Das ist, was ich vermutet 🙂
Gut, Kartoffel-Kartoffel 😀

InformationsquelleAutor Günter Zöchbauer

8

Werfen Sie einen Blick auf die ViewChild (und ViewChildren wie Gunter schon sagt) Anmerkungen.

Können Sie etwas wie das hier 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', []);
  }
}
```
Diese Lösung ist viel sauberer, von Ihnen positiv bewertet werden. Obwohl, ich hätte verwendeten Renderer und eine Richtlinie statt.
Ohh, würde Sie sich das an! Ich nehme an, du redest Renderer in Kombination mit invokeElementMethod? Nur sah Sie in der Dokumentation, noch nie gehört Renderer vor. Vielen Dank für diese Idee. Ich hab irgendwie Abneigung gegen die Idee der Verwendung von nativeElement
ja, tatsächlich unmittelbar auf nativeElement wird abgeraten, siehe ElementRef, also der sicherste Weg ist die Verwendung Renderer, da ist webworker sicher.
Ich aktualisiert meine Antwort. Danke für die Erklärung, ist es besonders sinnvoll, wenn Sie jetzt nehmen Webworker in Betracht.
Herausforderung angenommen (mit einer Richtlinie), siehe meine Antwort. Danke für die Idee. Ich wäre neugierig, zu wissen, wenn Sie das umsetzen würden es anders.

InformationsquelleAutor PierreDuc

Hier eine Richtlinie-Implementierung, - pro Eric ' s 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

Ich mag den Ansatz der Richtlinie, weil wir nicht hinzufügen müssen #input zu HTML, sowie die Richtlinie, die weiß, wie man den Fokus selbst.

Ich verwendet Array.some() nur etwas effizienter.

Renderer ist veraltet und neue Renderer2 nicht invokeElementMethod - Methode.

InformationsquelleAutor Mark Rajcok

3

Mein Ansatz wäre die Berufung auf eine Richtlinie und dem Selektor, um zu entfernen die Notwendigkeit der Iteration über ein array, und zu vermeiden, die lokalen Variablen (ich weiß nicht wie die Idee, dass zu viele von Ihnen auf meine Ansicht), wie Mark erwähnt.

Ich gehe davon aus, dass der Anwender immer nur eines wollen und es ist hardcoded, das ist genug für den Fall, dass der Benutzer gefragt. Das dynamische element zu konzentrieren, widerspräche diesem Ansatz.

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äre im Grunde das gleiche in jeder Antwort
```
export class App {
  @ViewChild(Input) input: Input;

  selectSample() {
    this.input.focusMe();
  }
}
```
Hier ist die plnkr.

Renderer ist veraltet und neue Renderer2 nicht invokeElementMethod - Methode.

InformationsquelleAutor Eric Martinez

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.