javascript - 如何通过 Angular Directive(指令)访问前一个兄弟？

Question

目前，我正在使用 ELEMENTREF 通过 Redenrer2 访问 DOM。这是一个基本示例:

import { Directive, Renderer2, ElementRef } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(private renderer: Renderer2, private el: ElementRef) {
    this.renderer.setStyle(this.el.nativeElement, 'background', 'yellow');
  }

}

上面的代码只是一个测试，将语法高亮保留为黄色。

但是，我需要知道如何访问前一个元素并捕获它的宽度以移动到左样式属性？

例:前哥的宽度是400px。当前元素有 400px 的左边。

我期待合作。

Answer 1

可以得到父元素:

let parent = this.renderer.parentNode(this.elementRef.nativeElement);

然后以某种方式选择他的 child ，也许给他们递增的 ID:

let sibling = parent.querySelector('#child5');

然后你有 sibling 宽度:

让宽度 = sibling.offsetWidth;。

希望对您有所帮助。