Angulaire 2 - sélectionnez l'objet du DOM et définissez le focus

Je peux y trouver une telle chose dans la documentation ou google des exemples.

J'ai beaucoup de zones d'entrée dans un div et j'ai besoin de sélectionner un en particulier de la programmation. Comment faire ?

Quelque chose comme

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

source d'informationauteur Marco Jr

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 exemple

Prendre un coup d'oeil à la ViewChild (et ViewChildren comme Gunter l'indique) des annotations.

Vous pouvez faire quelque chose comme ceci:

@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', []);
  }
}

Voici une Directive de mise en œuvre, par Eric suggestion:

@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

J'aime la directive approche, parce que nous n'avons pas besoin d'ajouter #input pour le HTML, et de la directive sait comment se concentrer en lui-même.

J'ai utilisé Array.some() juste pour être un peu plus efficace.

3

Mon approche serait de se fonder sur une Directive et son sélecteur, pour supprimer la nécessité d'une itération sur un tableau, et pour éviter les variables locales (je n'aime pas l'idée d'avoir un trop grand nombre d'entre eux sur mon point de vue), en tant que Marque est mentionnée.

Je suis en supposant que les utilisateurs veulent toujours seul et il est codé en dur, ce qui est suffisant pour le cas où l'utilisateur a demandé à propos. Avoir un élément dynamique pour se concentrer irait à l'encontre de cette approche.

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

  focusMe() {
    this.renderer.invokeElementMethod(this.elementRef.nativeElement, 'focus', []);
  }
}
```
Le composant serait essentiellement la même dans chaque réponse
```
export class App {
  @ViewChild(Input) input: Input;

  selectSample() {
    this.input.focusMe();
  }
}
```
Voici la plnkr.

Vous devez vous connecter pour publier un commentaire.