Angular技巧汇总 原

一、声明全局的类型定义

    声明项目的全局类型,同时不需要在各个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() 后,创建一个<script>的dom元素指向动态加载的js文件,并监听它的onload事件,然后把它插入到页面的头部。当加载成功后,让Promise对象resolve即可。

    完整的代码:

先定义一个PreloadScriptResolver服务:

@Injectable({
  providedIn: 'root'
})
export class PreloadScriptResolver implements Resolve<IPreloadScriptResult[]> {
  // 1、全局可动态插入的js列表。
  private scripts: any = {
    echarts: { loaded: false, src: "assets/lib/echarts.min.js" },
    canvasGauges: { loaded: false, src: "assets/lib/gauge.min.js" },
    sockjs: { loaded: false, src: "assets/lib/sockjs.min.js" }
  };
  load(...scripts: string[]) {
    const promises = scripts.map(script => this.loadScript(script));
    return Promise.all(promises);
  }
  loadScript(name: string): Promise<IPreloadScriptResult> {
    return new Promise((resolve, reject) => {
      if (this.scripts[name].loaded) {     // 防止多次加载
        resolve({ script: name, loaded: true, status: 'Already Loaded' });
      } else {
        // 2、动态插入js文件
        const script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = this.scripts[name].src;
        script.onload = () => {
          this.scripts[name].loaded = true;
          resolve({ script: name, loaded: true, status: 'Loaded' });
        };
        script.onerror = (error: any) => reject({ script: name, loaded: false, status: 'Loaded Error:' + error.toString() });
        document.head.appendChild(script);
      }
    });
  }
  // 3、解析守卫从当前路由的data.preloadScripts中取到依赖的js列表,并加载它们
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<IPreloadScriptResult[]> {
    return this.load(...route.routeConfig.data.preloadScripts);
  }
}

去相应模块的路由定义文件中:

const routes: Routes = [
  {
    path: "",
    component: DashboardComponent,
    resolve: {
      preloadScripts: PreloadScriptResolver  
    },
    data: {
      preloadScripts: ["echarts", "canvasGauges", "sockjs"]  // 5、传入当前路由依赖的js列表
    },
    children: [
      {  
        path: "widgets",
    。。。。。。


   }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏竹清助手

NodeJS错误处理最佳实践

NodeJS的错误处理让人痛苦,在很长的一段时间里,大量的错误被放任不管。但是要想建立一个健壮的Node.js程序就必须正确的处理这些错误,而且这并不难学。如果...

2233
来自专栏C++

python笔记:#002#第一个python程序

1194
来自专栏草根专栏

用ASP.NET Core 2.1 建立规范的 REST API -- HATEOAS

本文所需的一些预备知识可以看这里: http://www.cnblogs.com/cgzl/p/9010978.html 和 http://www.cnblog...

1534
来自专栏PHP实战技术

PHP ob_start() 函数介绍

php ob_start 与 ob_end_flush() 是 php 的缓冲输出函数。

4019
来自专栏杨建荣的学习笔记

一个细小的空间问题触发的报警(r11笔记第68天)

今天有一个数据库服务器报警,报警信息是来自于一个异机备库。可以看到这台服务器空间只有300多G,而剩余空间只剩下了不到30G.所以这样一个问题就很奇怪了...

3667
来自专栏雪胖纸的玩蛇日常

Vue+Django2.0 REST framework 打造前后端分离的生鲜电商项目(五)商品列表页

9346
来自专栏一枝花算不算浪漫

[Redis]Redis 概述及基本使用规范.

5018
来自专栏测试驿栈

Jmeter(七)_if控制器+循环控制器+计数器控制接口分支

最近查阅了一下网上关于if控制器的文章,大同小异,几乎找不到原创,于是决定自己写一篇

1K2
来自专栏蓝天

redis的一些简介

Redis是Remote Dictionary Server的缩写,他本质上一个Key/Value数据库,与Memcached类似的NoSQL型数据库。

1061
来自专栏顶级程序员

Linux中高效编写Bash脚本的10个技巧

Linux开源社区(微信号:cn_linux) 英文:Aaron Kili,翻译:Linux中国/ch-cn 链接:linux.cn/article-8618...

3475

扫码关注云+社区

领取腾讯云代金券