Angular 4 得到 dom 个元素

Question

您好，我正在尝试在 Angular 4 应用程序上单击编辑按钮后将焦点设置在输入元素上。

首先我尝试了 Renderer2，但它似乎不适合这个目的。

现在我正在尝试使用@ViewChild 获取它，我总是得到未定义的值。

我曾尝试实施 AfterViewInit 并在加载后立即记录元素，但我仍然得到 'undefined'。请帮忙..

        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

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

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

This is a great article on DOM Abstractions in Angular。

Answer 2

根据您的代码，只有当 editable 为真时，nameInput 才会出现。同样在这里，您的可编辑默认值设置为 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>

Angular 4 得到 dom 个元素

Angular 4 get dom element

single-page-application

typescript

angular