web-dev-qa-db-ja.com

Angular 4 get dom要素

こんにちは、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;
            }
angulartypescriptsingle-page-application
6
Bmax

コードによると、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>
3
monica

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

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

これはAngularのDOM抽象化に関する素晴らしい記事です 。

9
joshrathke