Angular 4获得dom元素

前端之家收集整理的这篇文章主要介绍了Angular 4获得dom元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
嗨,我想在Angular 4应用程序上单击编辑按钮后将焦点设置在输入元素上.

首先我尝试了Renderer2,但它似乎并不适用于此目的.

现在我正在尝试使用@ViewChild,我总是得到未定义的价值.

我事件尝试实现AfterViewInit并在加载后立即记录该元素,但我仍然得到’未定义’.请帮忙..

  1. import { Component,OnInit,Input,Output,EventEmitter,Renderer2,ViewChild,AfterViewInit } from '@angular/core';
  2. import { NgIf } from '@angular/common';
  3. import { DataService } from '../data.service';
  4. import { NgForm } from '@angular/forms';
  5.  
  6. @Component({
  7. selector: 'app-artist-list-item',template: `
  8. <button class="w3-button w3-circle w3-orange" (click)="edit(nameInput)"><i class="fa fa-pencil"></i></button>
  9. <span *ngIf="editable">
  10. <input class="name" #nameInput (keyup)="onKey(nameInput.value)" (keypress)="inputEnter($event)" [value]="artist.name">
  11. <button class="w3-button w3-green btn-save" (click)="save()">Save</button>
  12. </span>
  13. <span *ngIf="!editable">
  14. {{artist.name}}
  15. </span>
  16. `,styleUrls: ['./artist-list-item.component.scss']
  17. })
  18. export class ArtistListItemComponent implements OnInit,AfterViewInit {
  19.  
  20. @Input() artist: any;
  21. @Output() onDelete = new EventEmitter();
  22. @Output() onEdit = new EventEmitter();
  23. @Output() onSave = new EventEmitter();
  24. @ViewChild('nameInput') nameInput;
  25.  
  26. public editable: boolean = false;
  27. name: any = '';
  28.  
  29. constructor(private Data: DataService,private rd: Renderer2) { }
  30.  
  31. ngAfterViewInit() {
  32. console.log(this.nameInput);
  33. }
  34.  
  35. ngOnInit() {
  36. }
  37.  
  38. edit(el) {
  39. console.log(el);
  40. console.log(this.nameInput);
  41. this.editable = true;
  42. this.name = this.artist.name;
  43. }
  44.  
  45. }

顺便说一句,我删除了我试图设置焦点的代码.

  1. edit(el) {
  2. console.log(el);
  3. console.log(this.nameInput);
  4. this.nameInput.focus();
  5. this.editable = true;
  6. this.name = this.artist.name;
  7. }
根据您的代码,只有当editable为true时,nameInput才会出现.此处,您可以将editable的默认值设置为false(public editable:boolean = false).所以元素甚至不存在于DOM中,这就是为什么即使你在ngAfterViewInit中调用它也会给你未定义的原因.
  1. <span *ngIf="editable">
  2. <input class="name" #nameInput (keyup)="onKey(nameInput.value)" (keypress)="inputEnter($event)" [value]="artist.name">
  3. <button class="w3-button w3-green btn-save" (click)="save()">Save</button>
  4. </span>

猜你在找的Angularjs相关文章