一、现象

在项目的开发中,总会用到一些公司的脚本方法,同时,不希望在每个页面用到时又得需要引用,有点麻烦。

二、解决

1、在src文件夹下新建文件夹 utils;

2、在utils下新建文件 common.js,如:

var common = {

  showInfo: function(name, age){

    // 在控制台上打印出来

    console.log(name);

    console.log(age);

  }

}

3、 同时在utils下也新建对应的文件 common.d.js,如:

declare let common: {
  showInfo: (name: string, age: string) => void;
};

tips: 参数中的类型需要对应写上,具体语法可以参照TypeScript  ;https://www.tslang.cn/docs/handbook/basic-types.html

4、在.angular-cli.json中的scripts处添加common.js 所在的位置,如:

"scripts": [
"utils/common.js"
],

5、在需要调用的页面进行调用 common.showInfo("yang", "18");

三、总结

先认真阅读理解 TypeScript 的基本类型  https://www.tslang.cn/docs/handbook/basic-types.html,

注:common.js修改时或添加时,需要和common.d.ts进行同步处理,第一个参数的类型都需要对应写上,处理完后,重启服务即可生效

angular如何引入公共JS的更多相关文章

  1. Angular中引入外部js的使用方式

    在Angular中我们或许会用到部分外部插件的时候,像Bootstrap,Jquery这些当然我们可以通过Npm安装包的形式引入,但是还有一些其它的js库需要引入的话,我们又应该怎样操作呢? 在这里做 ...

  2. angular项目引用第三方公共js文件

    由于项目需要,领导要求在正在开发的angular项目中,引入公共js,以便进行统计计算. 于是便各种找度娘,网上有好多引用jquery插件的例子,于是便按照步骤对自身项目进行了改造,先记录一下: st ...

  3. vue如何全局引用公共js

    在项目开发中需要调用一些工具类方法,所以需要将公共方法放在公共js中,并且需要全局引用这些公共js 1:创建公共JS(utils.js)  src/common/utils.js export def ...

  4. 一个不错的angular 字体库( 引用js文件就行)

    https://klarsys.github.io/angular-material-icons/ 使用方法: 1.引入这个js文件, <script src="//cdnjs.clo ...

  5. Angular4.0引入laydate.js日期插件方法

    Angular是不支持直接引入js文件的,下面介绍项目如果引入laydate.js的方法 一.将下载的laydate中的js和theme文件放到一个统一的文件下面,我把它放到asset下 二.在ang ...

  6. 基于 Webpack 引入公共库的几种方式

    以 jquery 和其插件 jquery-modal 为例,记录下引入公共库的几种方式. 为了方便,首先安装 jquery 和 jquery-modal: cnpm i jquery jquery-m ...

  7. 【转】VUE 爬坑之旅-- 如何对公共JS,CSS进行统一管理,全局调用

    原文:https://blog.csdn.net/zgh0711/article/details/78664262 vue 中,将页面分为了各个组件,我们写好组件,就可以将这个组件运用到其他各个页面中 ...

  8. 向jsp中引入公共文件

    前沿,在网页开发中,总会存在某几个.js或者某几个.css是所有.jsp文件的公用文件,为了方便引用 我们把这些在公共的.js及.css文件放到一个.jsp文件中,只需要将这个引入所有公共.js及.c ...

  9. vue element-ui怎样提炼一个自己写的js当作公共js

    vue element-ui怎样提炼一个自己写的js当作公共js请教一下各位大神,我刚刚触摸vue element-ui几天,写的一个清晰检索的input框,现在需当作项目公共的部分,可遭需的html ...

随机推荐

  1. es6 实现数组的操作

    1.实现数组的去重: 1.1.方法一: let arr = [{id: 1, name: 'aa'}, {id: 2, name: 'bb'}, {id: 3, name: 'cc'}, {id: 4 ...

  2. (Python基础)字符串操作

    以下是我在学习过程中用的一些常用字符串操作的相关列子和具体注释,感兴趣的可以自己动手试试看 #字符串操作 name = 'my name is keep' print(name.capitalize( ...

  3. 稀疏矩阵 part 4

    ▶ 各种稀疏矩阵数据结构下 y(n,1) = A(n,m) * x(m,1) 的实现,GPU版本 ● MAT 乘法 __global__ void dotGPU(const MAT *a, const ...

  4. 分布式 基本理论 CAP 2

    关于P P, 即 Partition字面意思是网络分区,其实 包括了 各种网络问题, 我们要把它理解 一个 广义的 分区问题. P 涉及到了 时间, 这么说吧, 出现了分区, 那就是节点之间 “长久的 ...

  5. SpringMVC参数注解解释

    在Controller的开发中,经常会用到很多注解,下面解释一下关于形参常用注解的一些解释,他们主要是用来接收参数的. @ModelAttribute("vo", ObjectVo ...

  6. Activiti 框架学习

    1:工作流的概念 说明: 1)      假设:这两张图就是华谊兄弟的请假流程图 2)      图的组成部分: 人物:范冰冰 冯小刚 王中军 事件(动作):请假.批准.不批准 工作流(Workflo ...

  7. nohup 写法

    nohup 空格 php程序路径 空格 php脚本路径 >> .out日志路径 2>&1 &

  8. View的相关原理(读书笔记)

    View的使用方法相关: 1.setContentView() 2.LayoutInflater.inflate() PS:本质上setContentView()方法最终也是通过LayoutInfla ...

  9. angular的符号

    1.括号 {{模板标签}}: 模板标签中的内容会被当作一个表达式展开. [传入名] = ”接收变量名“: 可以把一个值传入组件.输入. (事件名) = “处理函数()”: 响应事件.输出. #视图变量 ...

  10. Chrome添加Axure RP插件

    之前一直用 Firefox 浏览器浏览原型文件,一直用不惯,而且用 Firefox 的唯一目的就是看原型.其他都是用 Chrome 浏览器,来回切换,各种麻烦,然后下定决心解决 Chrome 浏览器无 ...