时间戳

首页 > 解决方案 > 角度获取自定义组件的高度

html - 角度获取自定义组件的高度

问题描述

我正在尝试这样的代码：

  @ViewChild('footer_endlessblow')
  footerView: ElementRef;

  ngAfterViewInit(): void {
    console.log(this.footerView.nativeElement.offsetHeight);
  {

和我的component.html分开

<app-footer #footer_endlessblow></app-footer>

我的页脚组件看起来像这样。

页脚.css

    @media screen and (min-height: 600px) {
  #footer-div {
    border: 3px solid lightseagreen;
    background-color: lightblue;
    width: 95%;
    left: 2.5%;
    position: fixed;
    text-align: center;
    bottom: 10px;
    box-sizing: border-box;
    vertical-align: middle;
    transition: 0.5s ease;
  }
  p {
    margin: 0;
    transition: 0.5s ease;
  }
  .footer-contact-me {
    font-size: 30px;
    transition: 0.5s ease;
  }
  .footer-find-me {
    font-size: 30px;
    margin: 20px 0 15px 0;
    transition: 0.5s ease;
  }
  .footer-div-links {
    display: inline-block;;
    margin: -10px 30px 5px 50px;
    font-size: 22px;
    transition: 0.5s ease;
  }
  #footer-email {
    font-size: 22px;
    margin: 20px 0 10px 0;
    transition: 0.5s ease;
  }

  img {
    vertical-align: middle;
    transition: 0.5s ease;
  }
}

@media screen and (max-height: 600px) {
  #footer-div {
    border: 1px solid lightseagreen;
    background-color: lightblue;
    width: 95%;
    left: 2.5%;
    position: absolute;
    text-align: center;
    bottom: 10px;
    box-sizing: border-box;
    vertical-align: middle;
    transition: 0.5s ease;
  }

  p {
    margin: 0;
    transition: 0.5s ease;
  }

  .footer-contact-me {
    display: inline-block;
    font-size: 22px;
    vertical-align: middle;
    transition: 0.5s ease;
  }

  .footer-find-me {
    display: inline-block;
    margin:0 10px 0 20px;
    font-size: 22px;
    vertical-align: middle;
    transition: 0.5s ease;
  }

  #footer-email {
    font-size: 16px;
    margin: 0 0 0 10px;
    transition: 0.5s ease;
  }

  .footer-div-links {
    display: inline-block;
    margin-bottom: 3px;
    transition: 0.5s ease;
  }

  img {
    width: 30px;
    height: 30px;
    vertical-align: middle;
    transition: 0.5s ease;
  }
}

页脚.html

    <div id="footer-div">
  <p class="footer-contact-me">Contact me:</p><a id="footer-email" href="mailto:jawegielewski@gmail.com">jawegielewski@gmail.com</a>

  <p class="footer-find-me">Or find me on:</p>
  <div class="footer-div-links">
    <a href="https://www.facebook.com/jakub.wegielewski">
      <img alt="facebook" src="assets/images/facebook.png" title="facebook" width="40" height="40">
    </a>
  </div>
  <div class="footer-div-links">
    <a href="https://github.com/jawegielewski">
      <img alt="github" src="assets/images/github.png" title="github" width="40" height="40">
    </a>
  </div>
  <div class="footer-div-links">
    <a href="https://pl.linkedin.com/in/jakub-wegielewski">
      <img alt="linkedin" src="assets/images/linkedin.png" title="linkedin" width="40" height="40">
    </a>
  </div>

</div>

但后来我明白了ERROR TypeError: Cannot read property 'offsetHeight' of undefined。我更新了我的代码以提供更多信息。我更新了我的代码以提供更多信息。我更新了我的代码以提供更多信息。我更新了我的代码以提供更多信息。我更新了我的代码以提供更多信息。我更新了我的代码以提供更多信息。

标签： htmlangular

解决方案

您需要在 viewChild 中再设置一个属性，就像这样

@ViewChild("footer_endlessblow", { read: ElementRef }) footerView: ElementRef;

ViewChild 文档链接

https://angular.io/api/core/ViewChild

推荐阅读