javascript - Angular 8 - 如何通过类名获取最接近的父级？

Question

这就是我想要实现的目标(将此作为示例场景)-

• 元素 1
  • 元素 2
  • 元素 3
    • 元素 4

元素 4 是我的 Angular 分量。我想根据元素 1 和元素 2 的高度设置其高度。

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

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

Answer 1

请注意，这并不是真正的最佳实践方法。迭代发生 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;
}