Замена 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 />
Свати
источник