Typescript 中的 Javascript

Question

实际上每个 Javascript 代码在 typescript 中也应该是有效的，但是当我尝试运行下面的代码时，我得到了下面的错误。 有人可以在 typescript 中编写此 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>

Answer 1

该错误告诉您您可能有运行时错误，因为document.getElementById("navbar")可能会返回 null 所以document.getElementById("navbar").style.top如果元素没有可能会抛出错误存在。 如果您同意，您可以添加内联异常或将 typescript 配置切换到非严格模式。

链接：严格

Answer 2

为此，请尝试使用其类型包装 document.getElementById("navbar") ，然后您还可以使用安全导航器是什么？ 仅当较早的 object 不是 null 时才导航

Answer 3

解决方案：

组件.ts：

import { Inject }  from '@angular/core';
import { DOCUMENT } from '@angular/common'; 

constructor(@Inject(DOCUMENT) document){}

 prevScrollpos = window.pageYOffset;
  @HostListener('window:scroll', ['$event'])
  onWindowScroll() {
  var currentScrollPos = window.pageYOffset;
    if (this.prevScrollpos > currentScrollPos) {
        window.document.getElementById('navbar')!.style.top = "0";
      } else if (this.prevScrollpos < currentScrollPos) {
        window.document.getElementById('navbar')!.style.top = "-50px";
      }
      this.prevScrollpos = currentScrollPos;
    } 

tsconfig.json

将此行添加到 compilerOptions：

"noImplicitAny": false,