在 angular 组件中调用外部 JS 文件事件触发的函数

Question

我正在尝试将由 JS HTML、CSS 设计的网页转换为 angular 项目。我已将 JS 文件包含在 index.html 中，如下所示

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sample</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="">
<app-root></app-root>

<script type="text/javascript" src="assets/scripts/sample.js"></script>
</body>
</html>

sample.js

if (document.getElementById("fixedHeader")) {
    window.onscroll = function () { fixedHeader(); };
    var header = document.getElementById("fixedHeader");
    var fixed = header.offsetTop;
} 
function fixedHeader() {
    if (window.pageYOffset > fixed) {
        header.classList.add("fixed-active-lob");
        $('body').addClass("fixed-nav");
    } else {
        header.classList.remove("fixed-active-lob");
        $('body').removeClass("fixed-nav");
    }
}

current.component.html

<div class="gb-nav gn">
    <div id="fixedHeader" class="header">....
    </div>
</div>

sample.css 包含在 styles.css 中的文件具有

.gb-nav.gn .fixed-active-lob {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999999;
    -webkit-box-shadow: 0px 10px 15px -1px rgba(0,0,0,0.45);
    -moz-box-shadow: 0px 10px 15px -1px rgba(0,0,0,0.45);
    box-shadow: 0px 10px 15px -1px rgba(0,0,0,0.45);
}
body.fixed-nav{
    padding-top:56px
}

我无法从 angular 组件中的 sample.js 触发功能。但是，我能够通过在

中再次定义相同的函数来获得所需的结果

current.component.ts 如：

@HostListener('window:scroll', ['$event'])
    scrollHandler(event: any) {
    console.log("Scroll event", event);
    this.fixedHeader();
    }
fixedHeader() {
    var header = document.getElementById("fixedHeader");
    var fixed: number = 0;
    if (header?.offsetTop != undefined) {
      fixed = header?.offsetTop;
    } else {
      fixed = 0;
    }
    if (window.pageYOffset > fixed) {
        header?.classList.add("fixed-active-lob");
        $('body').addClass("fixed-nav");
    } else {
        header?.classList.remove("fixed-active-lob");
        $('body').removeClass("fixed-nav");
    }
}

但是我想使用JS文件中的函数而不是在ts文件中重做，请帮忙。

Answer 1

首先，修改 sample.js 使其像这样导出 fixedHeader

if (document.getElementById("fixedHeader")) {
  window.onscroll = function () { fixedHeader(); };
  var header = document.getElementById("fixedHeader");
  var fixed = header.offsetTop;
}  

export function fixedHeader() {
  if (window.pageYOffset > fixed) {
    header.classList.add("fixed-active-lob");
    $('body').addClass("fixed-nav");
  } else {
    header.classList.remove("fixed-active-lob");
    $('body').removeClass("fixed-nav");
  }
}

通过这次调整，我们将 sample.js 变成了一个模块，具有一个名为 fixedHeader 的导出，因此启用了其他模块，例如我们的 current.component.ts，以通过在 JavaScript: Modules.

中共享代码的标准、显式和规范方法使用它

接下来，在项目的 tsconfig.json 中设置 "allowJs": true 以通知 TypeScript 我们的项目包含 TypeScript 和 JavaScript 源文件的混合。

最后，将我们从sample.js导出的fixedHeader函数直接导入current.component.ts，从Angular组件[=37=中删除现在多余的方法], 调用导入函数如下

 import {Component, HostListener} from '@angular/core';

 import {fixedHeader} from '../assets/scripts/sample.js';

 @Component({
   // Angular boilerplate and ceremony
 })
 export class CurrentComponent { // or whatever it is actually called
   @HostListener('window:scroll', ['$event'])
   scrollHandler(event: Event) {
     console.log("Scroll event", event);
  
     fixedHeader();
  }
}

最后，从index.html.

中删除原来加载sample.js的脚本标签

注意：根据文件相对于彼此的实际位置，根据需要调整上述导入路径。

在 angular 组件中调用外部 JS 文件事件触发的函数

Calling function triggered by event from an external JS file in angular component

javascript

external-js

dom-events

typescript

angular