Question

我使用Angular 2建立一个网站，并将JavaScript文件添加到该组件。此脚本必须渲染某些图像的高度等于浏览器窗口的高度。

如何将此脚本添加到组件？

我在SO或其他任何地方找到的解决方案如下所示：

import './home.component.js';

但它不是我需要的！我在home.component.ts文件中需要这个：

@Component({
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss'],
    jsUrls: ['./home.component.js']
})

或其他......

更新1：在我的网站中，我使用Angular CLI和TypeScript。

更新2：您可以在GitHub上找到我的项目：https://github.com/WatchFriends/Web

Answer 1

这很有效，效果很好：

在angular-cli.json文件中，有一个部分“scripts”。在该数组中添加脚本的路径（作为双引号字符串）。

这是该文件中的一个片段：

  "mobile": false,
  "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.css",
    "../node_modules/font-awesome/css/font-awesome.css",
    "styles.css"
  ],
  "scripts": ["./app/my_script.js"],
  "environments": {
    "source": "environments/environment.ts",
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
  }

my_script是这样的：

function sayHello ( ) {
   console.log ( 'I am saying hello' );
}

然后就像你在任何地方所期望的那样打电话。要击败您可能在IDE中获得的恼人的“未找到”错误，您可以执行以下操作：

window [ 'sayHello' ] ( );

或创建一个包含对该函数的引用的实用程序类，这样您就可以像往常一样导入该类并调用该函数（您基本上只是为“my_script.js”函数提供框架外观）。

我试过两个，它工作得很好，没有错误（你正在使用ng服务或ng build当然等）。

在组件中添加外部JS文件，以使用Angular 2在浏览器中呈现图像

1 个答案: