Question

我想加载我自己的js文件，其中我编写了一些需要jQuery的自定义js。我想在jQuery之后加载我的js文件，我该怎么做。我不想把这个脚本文件放在index.html中，因为它会加载每个组件。

这是我的js文件

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Pro</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <!-- Material Design for Bootstrap fonts and icons -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

  <!-- Material Design for Bootstrap CSS -->
  <link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.0.0-beta.3/dist/css/bootstrap-material-design.min.css" integrity="sha384-k5bjxeyx3S5yJJNRD1eKUMdgxuvfisWKku5dwHQq9Q/Lz6H8CyL89KF52ICpX4cL" crossorigin="anonymous">
  <link rel="stylesheet" href="assets/css/style.min.css">
</head>
<body>
    <app-root></app-root>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>

主要问题是如何在某些其他脚本之后加载脚本文件，并仅使用相关组件。 login.js只能加载登录页面。

Answer 1

一种方法是将它包含在.angular-cli.json文件的“scripts”部分中，如果它是节点模块：

 "scripts": [
              "../node_modules/jquery/dist/jquery.min.js",
              "../node_modules/bootstrap-switch/dist/js/bootstrap-switch.min.js",
]

然后，创建一个注入令牌，并将其作为对main.ts模块和组件

的依赖项注入

// call this file 'mylib.lib.ts'
import { InjectionToken } from '@angular/core';
import * as myLib from '../../node_modules/myModule`;

export const libToken = new InjectionToken('libName');
export const libName = myLib
export * from 'libName';

将依赖项注入模块：

...
import * as mylib from './mylib.lib';
..
providers: [
    { provide: myLib.libToken, useValue: myLib.libName}
]

然后您可以将其添加到您的组件：

import { libName, libToken} from './mylib.lib';
...
constructor(@Inject(cesiumToken) private myLib: any) {}

这应该让你去。

另一种相当混乱的方法是将脚本附加到AfterViewInit钩子内ts文件中的主html文件中：

ngAfterViewInit() {   
    const script = document.createElement('script');
    script.src = '../../assets/js/myFile.js';
    document.body.appendChild(script);
}

对于方法一，只要确保它是jquery之后的脚本，对于方法二，如果是最后一个，因为它在呈现DOM之后附加标记

在Angular 4中的某些其他脚本之后加载带有组件的js文件

1 个答案: