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

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

angular typescript

在Angular 4中的某些其他脚本之后加载带有组件的js文件,angular,typescript,Angular,Typescript,我想加载我自己的js文件，我在其中编写了一些需要jQuery的自定义js。我想在jQuery之后加载我的js文件，我该怎么做。我不想把这个脚本文件放在index.html中，因为这样它将与每个组件一起加载这是我的js文件 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Pro</title> <base href=

我想加载我自己的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>


赞成

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

一种方法是将其包含在.angular-cli.json文件的“脚本”部分（如果是节点模块）：

 "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之后添加标记，那么它将是最后一个脚本

如何确保在jquery加载之后加载我的js文件？对于方法一，只需确保它是jquery之后的脚本，对于方法二，if将是最后一个，因为它在呈现DOM之后附加了标记，在第一个方法中，它还将确保只加载所需的组件。