Отже, я працюю з angular4 у своїй практичній роботі, і це нове для мене. На щастя, для того, щоб отримати елементи html та їх значення, я використовував
<HTMLInputElement> document.getElementByIdабо
<HTMLSelectElement> document.getElementById
Мені цікаво, чи є якась заміна для цього в кутовому
Відповіді:
Ви можете позначити свій елемент 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надрукує певний текст .
Ви можете просто вколоти маркер ДОКУМЕНТ в конструктор і використовувати на ньому ті самі функції
import { Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
@Component({...})
export class AppCmp {
constructor(@Inject(DOCUMENT) document) {
document.getElementById('el');
}
}
Або якщо елемент, який ви хочете отримати, знаходиться в цьому компоненті, ви можете використовувати посилання на шаблони .
Для Angular 8 або posterior @ViewChild є додатковий параметр, який називається opts, який має дві властивості: читання та статичність, читання є необов’язковим. Ви можете використовувати його так:
// ...
@ViewChild('mydiv', { static: false }) public mydiv: ElementRef;
constructor() {
// ...
<div #mydiv></div>
ПРИМІТКА: Статичний: false більше не потрібно в Angular 9. (саме { static: true }тоді, коли ви збираєтесь використовувати цю змінну всередині ngOnInit)
*ngIf. Як ви створюєте елемент?
element: HTMLElement;
constructor() {}
fakeClick(){
this.element = document.getElementById('ButtonX') as HTMLElement;
this.element.click();
}