Эквивалент $ ('селектор'). Угловое положение, когда значение DOM пуст

Question

Я собираюсь настроить положение элемента на основе другого элемента.и нужно знать значение left другого элемента.Проблема в том, что объект DOM имеет пустое значение для left свойства стиля, и я просто не могу получить позицию исходного элемента.
предположить что-то вроде этого:

export class SomeComponent {
  ...
  ShowDropdownContent(dropdown){
    console.log(dropdown.style.left);//Loggs an empty string.
  }
  ...
}

Между тем в jquery мы просто называем: $('SomeSelector').position().left.
Имеет ли angular какой-либо эквивалент этого?(особенно, когда левое значение элемента DOM пусто).

Answer 1

Вы можете вызвать функцию getBoundingClientRect () для nativeElement:

<select #dropdown>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>


export class AppComponent implements AfterViewInit  {
 @ViewChild("dropdown") dropdown:ElementRef;
 constructor() {}
  ngAfterViewInit() {
    // viewChild is set after the view has been initialized
    const rect = this.dropdown.nativeElement.getBoundingClientRect();
    console.log(rect.left);
  }
}

Answer 2

Это потому, что свойство style ссылается на атрибут style элемента.

Убедитесь сами.

const div = document.querySelector('div');

console.log(div.style.background);
console.log(div.style.border);

div {
  border: 1px solid black;
}

<div style="background: red"></div>

Чтобы получить стиль, положитесь на getComputedStyle.

const div = document.querySelector('div');

const computed = window.getComputedStyle(div);

console.log(computed.getPropertyValue('background'));
console.log(computed.getPropertyValue('border'));

div {
  border: 1px solid black;
}

<div style="background: red"></div>