Angulaire 2 focus d'entrée ne fonctionne pas

Vos tentatives ne fonctionnent pas car:

• focused est une propriété de conduire la mat-catégorie ciblée sur mdInputContainer. Vous pouvez l'utiliser pour savoir si votre entrée est porté ou non. Vous ne pouvez pas l'utiliser pour modifier l'état de focalisation.
• focus est une méthode de mdInput qui vous permet par programme concentrer l'entrée. Vous pouvez appeler la myInput.focus() avec myInput être quelque chose comme ViewChild('myInput') par exemple.

Mais la façon la plus simple d'obtenir ce que vous voulez est d'utiliser la norme autofocus attribut :

<md-input-container>
    <input mdInput type="text" name="a" placeholder="zzzz" autofocus>
</md-input-container>

OriginalL'auteur David Palita

J'ai été aux prises avec le même problème. J'ai été à l'aide de la touche F6 pour ouvrir la boîte de dialogue et je ne pouvais pas le <input> pour obtenir le focus. Il s'est avéré que je n'étais pas empêcher le comportement par défaut de la touche F6 et F6 souligne l'adresse URL du navigateur de la fenêtre; c'était un vol de se concentrer.

switch (event.keyCode) {
      case 117:
        event.preventDefault();
        this.openAddAveragesDialog();
        break;
      default:
        return;
    }

Aussi, pas de magie attribut de balise fonctionne. L'Autofocus, Concentré, se Concentrer, que ce soit, pas de dés. J'ai dû créer une directive et l'utiliser dans mon élément input. J'ai obtenu de l'aide avec l'aide de cette réponse.

Ici, c'est l'élément après l'ajout de la directive (numberOnly est une autre directive que pour nombre d'entrée):

<md-input-container> <input mdInput [focus]="true" [numberOnly]="true"/></md-input-container>

**Edit : Ajout de la Directive de code comme suggéré par @Mackelito pour plus de clarté.
Voici la directive j'ai écrit à l'aide de la réponse que j'ai lié ci-dessus. Gardez à l'esprit le matériel a changé leur étiquette étiquettes à <input matInput> de <input md-input>

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

@Directive({
  selector: '[focus]'
})

export class FocusDirective implements OnChanges, OnInit {
@Input()
focus: boolean;

constructor(@Inject(ElementRef) private element: ElementRef, public renderer: Renderer) {}

ngOnInit() {
    this.renderer.invokeElementMethod(this.element.nativeElement,   'focus', []);
}

public ngOnChanges() {
this.element.nativeElement.focus();
}

} 

OriginalL'auteur Hodglem

Vous pouvez généralement placer le focus sans Tapuscrit de code, en utilisant le Modèle de balisage. Mais dans le cas d'une boîte de Dialogue, vous aurez besoin d'utiliser @Mackelito de la solution avec @ViewChild et ngAfterViewInit().

J'ai dû me concentrer un TextArea qui est à l'intérieur d'un Menu lorsque le Menu s'affiche. Heureusement, le Menu a un (menuOpened) cas je pourrait lier.

  <button mat-stroked-button color="accent" [matMenuTriggerFor]="addMenu"
    (menuOpened)="newTypes.focus()">
    Add
    <mat-icon class="dyna-dropdown-arrow">arrow_drop_down</mat-icon>
  </button>
  <mat-menu #addMenu="matMenu" [overlapTrigger]="false">
    <form [formGroup]="formGroup" (ngSubmit)="onFormSubmit()" novalidate (keydown.tab)="$event.stopPropagation()">
      <mat-form-field appearance="outline" (click)="$event.stopPropagation(); false;">
        <mat-label>New Pay Types</mat-label>
        <textarea #newTypes rows="6" matInput placeholder="New Pay Types" [formControl]="formGroup.controls['payTypes']" required></textarea>
        <mat-hint>Enter multiple Pay Types, separated by newlines</mat-hint>
        <mat-error *ngIf="formGroup.controls['payTypes'].invalid">Required</mat-error>
      </mat-form-field>
      <div fxLayout="row-reverse" fxLayoutGap="8px" fxLayoutAlign="start center">
        <button mat-stroked-button color="accent" type="submit" [disabled]="!formGroup.valid">Add</button>
        <button mat-button type="button">
          Cancel
        </button>
      </div>
    </form>
  </mat-menu>

L'important est ici la (menuOpened)="newTypes.focus()" et nous voyons la newTypes est un TemplateRef variable attachée à la TextArea, je veux me concentrer marqué comme <textarea #newTypes.

Voici une capture d'écran qui montre mon menu de l'ouverture, et il devient immédiatement le focus à la zone de texte à l'intérieur.

OriginalL'auteur H Dog