Блог

Главная - Вопросы по программированию - Angular2: получить размеры DOM-элемента (без ElementRef)

Angular2: получить размеры DOM-элемента (без ElementRef)

#dom #angular

#dom #angular

Вопрос:

Я пытаюсь получить размеры DOM-элемента (высота / ширина). Что касается соображений безопасности (см. https://angular.io/docs/ts/latest/guide/security.html ) Я не хочу напрямую обращаться к DOM.

У кого-нибудь есть другие идеи?

Комментарии:

1. Почему вы не хотите использовать ElementRef?

2. Как я больше думал об этом: это не имеет значения. Две причины не использовать его: 1) Безопасность: применяется только в том случае, если я изменяю объект DOM 2) Рендеринг на стороне сервера: не применяется, поскольку мне пришлось бы повторно отображать при изменении ширины.

Ответ №1:

Вы могли бы сделать это следующим образом

 import { Component } from '@angular/core';

@Component({
  selector: 'my-selector',
  template: '<div #myDiv (click)=getElementDimensions(myDiv)>Hello</div>'
})
export class AboutComponent {

  constructor() { }

  getElementDimensions(el: HTMLDivElement) {
    console.log(el.getBoundingClientRect())
  }

}

Ответ №2:

Поскольку я больше думал о своем вопросе:

На самом деле доступ к DOM-элементу через ElementRef в этом случае не представляет угрозы безопасности, поскольку через него не вводятся никакие (небезопасные-) данные.

Если вы хотите обойти использование ElementRef (например. для рендеринга на стороне сервера) и хотите управлять DOM-элементом, я рекомендую посмотреть на класс Renderer.