モーダル角4のオートフォーカスが機能しない

Question

モーダルの読み込み時にフォーカスを合わせる必要がありますが、html5属性autofocusを使用すると動作しないようです。 動作させることは可能ですか？

<div class="col-md-6"> 
<div class="form-group label-floating"> 
    <label class="control-label"> 
    {{'ticketbundle.busroutedetail.dialog.labels.buslinename' 
    | translate }}<span class="star">*</span> 
    </label><input autofocus class="form-control" id="name" required 
    [(ngModel)]="busRouteDetail.name" name="name" #busRouteDetailname> 
</div> 
</div> 

私はあなたが#myInputでローカルテンプレートの参照を設定し、TSファイルに@ViewChild() myInputで要素にアクセスし、フックにngAfterViewInitネイティブ要素を取得し、フォーカスを設定することができ、角度材料2

Answer 1

を使用しています this.myInput.nativeElement.focus()

別のオプションを持つプロパティは、フォーカスディレクティブを構築し、要素のフォーカス属性にバインドすることですlike this

Answer 2

Materialダイアログを使用している場合は、cdk-focus-initialを使用して、初期フォーカスをどこにするかを指定できます。

<input cdk-focus-initial type="text"> 

このEXAMPLEを参照してください。