Замена document.getElementById в angular4 / typescript?

90

Итак, я работаю с angular4 в своей практической работе, и для меня это в новинку. К счастью, чтобы получить элементы html и их значения, я использовал <HTMLInputElement> document.getElementByIdили <HTMLSelectElement> document.getElementById

Мне интересно, есть ли ему замена в angular

angular typescript

— Нино Гутьеррес
источник

2

Почему бы не использовать getElementById?

— Сурен Срапян

1

Почему вы хотите это сделать?

— Léo R.

Просто интересно, есть ли угловой способ получения элементов.

— Нино Гутьеррес

139

Вы можете пометить свой элемент DOM с помощью #someTag, а затем получить его с помощью @ViewChild('someTag').

См. Полный пример:

import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';

@Component({
    selector: 'app',
    template: `
        <div #myDiv>Some text</div>
    `,
})
export class AppComponent implements AfterViewInit {
    @ViewChild('myDiv') myDiv: ElementRef;

    ngAfterViewInit() {
        console.log(this.myDiv.nativeElement.innerHTML);
    }
}

console.logнапечатает какой-то текст .

— Александр Анник
источник

Появляется ошибка Ошибка: не удается разрешить '@ angular / core / src / metadata / di' Ошибка: не удается разрешить '@ angular / core / src / linker / element_ref'

— Нино Гутьеррес

2

nvm, решается путем импорта вот так. импортировать {Component, OnInit, ViewChild, ElementRef} из '@ angular / core';

— Нино Гутьеррес

17

это не сработает, если у вас есть условный элемент dom, например * ngFor, * ngIf и т. д.

— Равиндра Торат,

Angular 8+ требует двух аргументов декоратора ViewChild.

Как я могу добавить #myDiv, только если условие выполнено? Например: с id я могу сделать [id] = "isValid? 'MyDiv': ''. Спасибо

— daniel8x

78

Вы можете просто вставить токен DOCUMENT в конструктор и использовать на нем те же функции

import { Inject }  from '@angular/core';
import { DOCUMENT } from '@angular/common'; 

@Component({...})
export class AppCmp {
   constructor(@Inject(DOCUMENT) document) {
      document.getElementById('el');
   }
}

Или, если элемент, который вы хотите получить, находится в этом компоненте, вы можете использовать ссылки на шаблоны .

— Сурен Срапян
источник

24

Для Angular 8 или последующего @ViewChild есть дополнительный параметр opts, который имеет два свойства: чтение и статическое, чтение не является обязательным. Вы можете использовать это так:

// ...
@ViewChild('mydiv', { static: false }) public mydiv: ElementRef;

constructor() {
// ...

<div #mydiv></div>

ПРИМЕЧАНИЕ: Static: false больше не требуется в Angular 9. (как раз { static: true }тогда, когда вы собираетесь использовать эту переменную внутри ngOnInit)

— Густаво Сантамария
источник

1

Это работает, когда вы динамически скрываете или показываете элементы с помощью *ngIf. Как вы создаете элемент?

— Густаво Сантамария,

7

  element: HTMLElement;

  constructor() {}

  fakeClick(){
    this.element = document.getElementById('ButtonX') as HTMLElement;
    this.element.click();
  }

— Сезар Девеса
источник

2

Это очень небезопасно (выполнение этой команды в Angular Universal вызывает сбой) и должно использоваться только в том случае, если другой вариант невозможен (также

— учтите,

2

M @ Joniras, почему это очень небезопасно?

— Sumi Straessle,

6

Попробуй это:

Код файла TypeScript:

(<HTMLInputElement> document.getElementById ("имя")). Значение

HTML код:

 <input id = "name" type = "text" #name />

— Свати
источник