Angular 8 - 如何按类名获取最近的父级？答案

【问题标题】：Angular 8 - How do I get the closest parent by class name?Angular 8 - 如何按类名获取最近的父级？
【发布时间】：2020-01-01 01:46:19
【问题描述】：

这就是我想要实现的（将其视为示例场景） -

元素 1
- 元素 2
- 元素 3
  - 元素 4

元素 4 是我的角度组件。我想根据元素 1 和元素 2 的高度来设置它的高度。

元素 1 和元素 2 可以位于元素层次结构中的任何位置，即它们不一定必须是直接父级或兄弟级。我希望能够通过类名获取元素 1 和元素 2 的引用并获取它们的高度。

通过类名或任何其他选择器以角度查询父元素的最佳方法是什么？

【问题讨论】：

根据其他动态内容的高度动态控制元素的高度在 Angular 中是非常成问题的。简单地引用元素不太可能足以完成这项工作。当元素 1 和元素 2 发生变化时，试图让元素 4 保持最新，您会遇到变化检测问题。
是元素 1/2/3 角度组件还是只有元素 4 是角度组件？
@tgralex 只有元素 4 是一个角度组件。所有其他元素可能是也可能不是角度组件。
@Reactgular 在这种情况下你有什么建议？你会推荐为此目的使用 jQuery 吗？
它与查询 DOM 元素没有任何关系。这样做相对简单，但是您如何知道元素 1 或 2 是否发生了变化？如果元素 4 取决于这些元素的高度，并且这些元素稍后会发生变化，那么元素 4 怎么知道它也需要改变它的高度呢？这是通过 JavaScript 进行 DOM 对象布局时的常见问题。我建议您在开始尝试通过 JavaScript 解决布局问题之前重新考虑您的方法。尝试先找到一种 CSS 方法。

标签： javascript angular selector angular-directive angular8

【解决方案1】：

你试过用 CSS 控制高度吗？喜欢：

div p选择<div>元素内的所有<p>元素

div > p 选择父元素为<div> 元素的所有<p> 元素

https://www.w3schools.com/cssref/css_selectors.asp

我建议使用类，例如

element1-class > element4-class {
   height: 30px;
}

【讨论】：

整个层次结构都在一个可拖动和可调整大小的网格布局内。这就是我需要动态解决方案的原因。

【解决方案2】：

请注意，这并不是真正的最佳实践类型的方法。迭代发生 100 次，希望根据类名寻找父元素。

/**
 * findParentElementByClass, returns an parent element based on a 
 * class name. This parent class name is chained off the required 
 * child component.
 * 
 * @param  {String} parentClass    // parent class
 * @param  {String} componentClass // Element 4 class in your case
 * @return {Node} componentParent          
 */
function findParentElementByClass(parentClass, componentClass) {
    let componentParent = document.querySelector(`.${componentClass}`).parentNode;

    for (let i = 0; i < 100; i++) {
        if (componentParent.classList.contains(`.${parentClass}`)) {
            break;
        } else {
            componentParent = componentParent.parentNode;
        }
    }

    return componentParent;
}

【讨论】：

非常感谢您的意见。我一定会尝试一下，看看它是否会影响性能。