Angular 4 get dom元素

嗨，我试图设置焦点的输入元素，一旦编辑按钮被点击角4应用程序。Angular 4 get dom元素

首先，我尝试了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; 
      }

来源

2017-07-30 Bmax

根据您的密码，nameInput只会在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>

来源

2017-07-30 05:55:52 monica

您需要访问您的@ViewChild声明中定义的操作实际的DOM元素的元素有关的nativeElement财产。仅仅调用@ViewChild只会为DOM中的元素创建一个ElementRef。因此，为什么您必须访问ElementRef的nativeElement属性才能操作DOM元素。例如：

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

This is a great article on DOM Abstractions in Angular。

来源

2017-07-30 03:58:08 joshrathke

Angular 4 get dom元素

回答

相关问题