AngularUseJavaScript

發表於： 分類於：
字數： 725 閱讀：≈ 2分鐘 瀏覽：

Angular引入JavaScript

前言

在實務上我們可以在npm上面找到要用的 JavaScript 來引用 , 但有時可能會遇到以下狀況

  1. mpm 找不到
  2. 需要匯入匯入自己寫的JavaScript

方法一

如果JavaScript 不複雜可以轉成 TypeScript

方法 二 引入第三方的JavaScript

第一步 安裝下載JavaScript

準備一個 JavaScript

ex.

function Hello(){
	alert("Hello")
}

把js文件放到 /assets目錄下

ex.

 /assets/Hello.js

第二步 設置compilerOptions的allowJs屬性為true

打開 tsconfig.json，找到compilerOptions ，並設置compilerOptions的allowJs屬性為true;，添加 “allowJs”: true,

ex. 添加 “allowJs”: true,

 /assets/js/Hello.js

第二步 設置compilerOptions的allowJs屬性為true

打開 tsconfig.json，找到compilerOptions ，並設置compilerOptions的allowJs屬性為true;，添加 “allowJs”: true,

ex. 添加 “allowJs”: true,

c4b992a9871c491fe1e8b2b832c0a5b358c4bdf6

 "compilerOptions": {
    .....................
    "allowJs": true,
	  .....................
  }

完整如下 tsconfig.json完整如下

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "allowJs": true,
    "importHelpers": true,
    "target": "es5",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true,
    "enableIvy": false
  }
}

第三步 : 引入javaScript

在 angular.json，scripts區塊配置js文件路径 

"scripts": [
              "src/assets/js/Hello.js",
            ]

第四步，在當前组件.ts中使用函数添加js

在 index.html 引入

index.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Hello</title>
  <base href="/">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,IE=11">
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script src="assets/js/Hello.js" type="text/javascript"></script>

</head>

<body class="mat-typography">
  <app-root></app-root>
</body>

</html>

第四步 : 在當前组件.ts中使用函数添加js

import 'src/assets/js/Hello.js';

參考

angular在ts中使用第三方js_weixin_43182222的博客-CSDN博客

How to call JavaScript functions from Typescript in Angular 5? - Stack Overflow

Angular引入自己写的js或者其他_qq_43205711的博客-程序员宅基地_angular引用自己的js - 程序员宅基地 (cxyzjd.com)