Angular 4获得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

您需要访问在声明中nativeElement定义的元素上的属性@ViewChild来操作实际的DOM元素.单独调用@ViewChild只会ElementRef在DOM中创建一个元素.因此,为什么你必须访问操作DOM元素的nativeElement属性ElementRef.例如:

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

这篇关于Angular中DOM抽象的文章很棒.

Answer 2

根据您的代码，只有在为真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>