Angular技巧汇总

Stella981
• 阅读 590

一、声明全局的类型定义

    声明项目的全局类型,同时不需要在各个Ts文件中import {XXX} from 'xxx'  ,就能直接引用!方法是:

     增加src/typings.d.ts文件 ,在文件中增加  interface IName {  name:string ; } 的类型定义。

     那么IName这个类型在所有的TS文件中自动可以访问 ! 

    注意:不要在代码前增加  export 的关键字。   

    参考: 3rd Party Lib

二、在懒加载指定模块前,动态加载一个js文件。

     通常我们在项目中引用第三方包,一种是import 方法,其代码最终是打包一起;一种是配置angular.json文件,其中有scripts : [] ,在里面增加相应的js完整路径达到引用js文件, 其代码不参与构建,会在首页加载时,做为普通的外挂脚本文件引入。

     无论是打包在一起,还是外挂脚本,都是会增加初始加载的负担!比如echarts.js 有800kb的大小,在初始的登录页面,用户根本用不到图表的功能,甚至进入主界面的模块后,也不需要加载它, 当仅我在点击到某些有图表页面的页面时,才必须加载echarts.js文件。我们的项目代码通常会拆分成多个“功能模块”,每个模块负责一组功能相近的页面,这些模块可以懒加载,就是当路由到相关页面时,才去加载模块。

     那么如何实现,在懒加载模块时,动态的引入一个依赖js文件?

这里用到两个技术:

   1、解析路由守卫,参考官方文档,   路由守卫有三种:

  •      激活守卫_CanActivate_ :  在函数返回true时,才能进入路由页面。
  •      离开守卫_CanDeactivate_ :  在函数返回true时,才能离开路由页面。
  •      解析守卫Resolve          :   在函数返回的Promise对象成功后,才进入路由页面。

  2、动态插入js脚本。

    先new  Promise() 后,创建一个