角4 get dom要素

Question

こんにちは私は、入力ボタンをAngular 4アプリケーションでクリックすると、入力要素にフォーカスを設定しようとしています。

まず、私はRenderer2を試しましたが、この目的のためには動作しません。

今私は@ViewChildを使用して取得しようとしていますが、私は常に未定義として値を取得しています。

イベントは、AfterViewInitの実装を試み、一度ロードされるとすぐに要素をログに記録しようとしましたが、まだ未定義です。助けてください..

 import { Component, OnInit, Input, Output, EventEmitter, Renderer2, ViewChild, AfterViewInit } from '@angular/core'; 
     import { NgIf } from '@angular/common'; 
     import { DataService } from '../data.service'; 
     import { NgForm } from '@angular/forms'; 

     @Component({ 
      selector: 'app-artist-list-item', 
      template: ` 
        <button class="w3-button w3-circle w3-orange" (click)="edit(nameInput)"><i class="fa fa-pencil"></i></button> 
        <span *ngIf="editable"> 
         <input class="name" #nameInput (keyup)="onKey(nameInput.value)" (keypress)="inputEnter($event)" [value]="artist.name"> 
         <button class="w3-button w3-green btn-save" (click)="save()">Save</button> 
        </span> 
        <span *ngIf="!editable"> 
         {{artist.name}} 
        </span> 
      `, 
      styleUrls: ['./artist-list-item.component.scss'] 
     }) 
     export class ArtistListItemComponent implements OnInit, AfterViewInit { 

      @Input() artist: any; 
      @Output() onDelete = new EventEmitter(); 
      @Output() onEdit = new EventEmitter(); 
      @Output() onSave = new EventEmitter(); 
      @ViewChild('nameInput') nameInput; 

      public editable: boolean = false; 
      name: any = ''; 

      constructor(private Data: DataService, private rd: Renderer2) { } 

      ngAfterViewInit() { 
       console.log(this.nameInput); 
      } 

      ngOnInit() { 
      } 

      edit(el) { 
       console.log(el); 
       console.log(this.nameInput); 
       this.editable = true; 
       this.name = this.artist.name; 
      } 

     } 

私はフォーカスを設定しようとしたコードを削除しました。

  edit(el) { 
       console.log(el); 
       console.log(this.nameInput); 
       this.nameInput.focus(); 
       this.editable = true; 
       this.name = this.artist.name; 
      } 

Answer 1

nameInputは、editableがtrueの場合にのみ表示されます。また、editableのデフォルト値はfalse（public editable: boolean = false）に設定されています。 DOM内に要素が存在しないため、ngAfterViewInitを呼び出しても定義されていません。

<span *ngIf="editable"> 
    <input class="name" #nameInput (keyup)="onKey(nameInput.value)" (keypress)="inputEnter($event)" [value]="artist.name"> 
    <button class="w3-button w3-green btn-save" (click)="save()">Save</button> 
</span> 

Answer 2

は、あなたが実際のDOM要素を操作するためにあなたの@ViewChild宣言内で定義された要素にnativeElementプロパティにアクセスする必要があります。 @ViewChildだけを呼び出すだけで、DOM内の要素にElementRefが作成されます。したがって、なぜElementRefのnativeElementプロパティにアクセスしてDOM要素を操作する必要がありますか。たとえば、

ngAfterViewInit() { 
    console.log(this.nameInput.nativeElement); 
} 

This is a great article on DOM Abstractions in Angularです。