如何通过角度指令访问前一个兄弟？答案

【问题标题】：How to access the previous sibling through an angular directive?如何通过角度指令访问前一个兄弟？
【发布时间】：2019-01-28 17:31:09
【问题描述】：

目前，我正在使用 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。

我期待合作。

【问题讨论】：

你不能，你需要一个父指令来管理孩子或使用共享服务来触发兄弟的另一个指令。
在 Renderer2 中，我有抽象的 nextSibling (node: any): any。例如，它会不会有类似抓取 previousSibling 的东西？
如果理解正确，您有类似列表的东西，并且您希望每个下一个元素（兄弟）的 left 属性等于“哥哥”（前兄弟）的宽度？跨度>
就是这样@Християн Христов！你需要它，但你必须与这种情况作斗争。
您可以尝试将哥哥作为输入传递给下一行，这应该可以解决问题。

标签： javascript angular typescript angularjs-directive frontend

【解决方案1】：

可以获取父元素：

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

然后以某种方式选择他的孩子，也许给他们递增的 ID：

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

然后你有兄弟姐妹的宽度：

let width = sibling.offsetWidth;.

希望对您有所帮助。

【讨论】：

您正在生成此错误：ERROR TypeError: Cannot read property 'querySelector' of null;在新的 HighlightDirective (highlight.directive.ts:10)；在 createClass (core.js:9303)
现在，如何从父节点中选择所有子节点...如果我能做到这一点，我就能解决我的问题。