Question

在我的应用中，我具有以下结构：

<fin-header></fin-header>
<main></main>
<fin-footer></fin-footer>

在标题中，我想添加滚动到main的特定组件。我的滚动方法将elementRef作为参数。但是我无法通过@ViewChild来获得一个，因为main的组件不是header的子代。

是否有机会获得elementRef不是孩子的组件？

Answer 1

也许您可以稍微修改一下结构并将组件嵌入到父级中。像这样：

   // begin vertical menu
  .menu ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
  }
  .menu ul li {
    padding: 15px;
    position: relative;
    width: 83%;
    border-top: 1px solid #efeeee;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
  }
  .menu ul li:hover {
    background-color: #edecec82;
  }
  .menu ul ul {
    transition: all 0.3s;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 80%;
    top: -2%;
    background-color: #e7e3e35e;
  }
  .menu ul li:hover > ul {
    opacity: 1;
    visibility: visible;
  }
  .menu ul li a {
    color: gray;
    text-decoration: none;
  }
  .menu > ul > li:nth-of-type(3)::after {
    content: '+';
    position: absolute;
    margin-left: 5%;
    color: black;
    font-size: 20px;
  }
  mat-icon {
    margin-right: 10px;
    margin-top: 5px;
  }
  // end vertical menu

通过这种方式，父级可以将其子级（主）的引用传递给另一个子级（标头）。

Answer 2

您可以获取main elementRef并使用nativeElement.parentElement获取父级，并从父级对DOM进行另一个查询。例如，如果结构是这样的：

<div>
  <fin-header></fin-header>
  <main></main>
  <fin-footer></fin-footer>
</div>

获得main的{{1}} elementRef将成为div。当然，nativeElement.parentElement将拥有所有div的孩子。

angular2获取不是子组件的elementRef

2 个答案: