时间戳

首页 > 解决方案 > 打字稿中的 Javascript

javascript - 打字稿中的 Javascript

问题描述

实际上每个 Javascript 代码在打字稿中也应该是有效的，但是当我尝试运行下面的代码时，我得到了下面的错误。有人可以用打字稿写这个javascript代码吗？

Error: 20: 9 - error TS2531: Object is possibly 'zero'.20 document.getElementById ("navbar"). Style.top = "0";

组件.ts

var prevScrollpos = window.pageYOffset;
    window.onscroll = function() {
    var currentScrollPos = window.pageYOffset;
      if (prevScrollpos > currentScrollPos) {
        document.getElementById("navbar").style.top = "0";
      } else {
        document.getElementById("navbar").style.top = "-50px";
      }
      prevScrollpos = currentScrollPos;
    }

html:

<nav class="navbar navbar-expand-lg navbar-dark pb_navbar pb_scrolled-light w3-animate-right navlist-right  "  id="navbar">
  <div class="container">
    <a class="navbar-brand" href="index.html"></a> 
    <button class="navbar-toggler d-block d-sm-none"   (click)="toggleNavbar()" type="button" data-toggle="collapse" data-target="#probootstrap-navbar" aria-controls="probootstrap-navbar" aria-expanded="true" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span> 
    </button>
    <div class="collapse navbar-collapse "  [ngClass]="{ 'show': navbarOpen }" id="onright">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item"><a class="nav-link" href="#" (click)= " NavBar()" >Home </a></li>
        <li class="nav-item"><a class="nav-link" href="#service" (click)= " NavBar()">Service</a></li>
        <li class="nav-item"><a class="nav-link" href="#blog" (click)= " NavBar()">Blog</a></li>
        <li class="nav-item"><a class="nav-link" href="#contact" (click)= " NavBar()">Contact</a></li>        
      </ul>
    </div>
    
  </div>
</nav>

标签： javascripthtmlangulartypescriptbootstrap-4

解决方案

为此，请尝试使用其类型包装 document.getElementById("navbar") 然后您还可以使用安全导航器，它是？仅在较早的对象不为空时导航

推荐阅读