Angular技巧汇总

1、声明全局的类型定义

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

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

     那么IName这个类型在全部的TS文件中自动能够访问 ！ 

    注意：不要在代码前增长  export 的关键字。   

    参考： 3rd Party Lib

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

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

     不管是打包在一块儿，仍是外挂脚本，都是会增长初始加载的负担！好比echarts.js 有800kb的大小，在初始的登陆页面，用户根本用不到图表的功能，甚至进入主界面的模块后，也不须要加载它， 当仅我在点击到某些有图表页面的页面时，才必须加载echarts.js文件。咱们的项目代码一般会拆分红多个“功能模块”，每一个模块负责一组功能相近的页面，这些模块能够懒加载，就是当路由到相关页面时，才去加载模块。

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

    这里用到两个技术：

   一、解析路由守卫，参考官方文档，   路由守卫有三种：

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

  二、动态插入js脚本。

    先new  Promise() 后，建立一个<script>的dom元素指向动态加载的js文件，并监听它的onload事件，而后把它插入到页面的头部。当加载成功后，让Promise对象resolve便可。

    完整的代码：

先定义一个PreloadScriptResolver服务：

@Injectable({
  providedIn: 'root'
})
export class PreloadScriptResolver implements Resolve<IPreloadScriptResult[]> {
  // 一、全局可动态插入的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 {
        // 二、动态插入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);
      }
    });
  }
  // 三、解析守卫从当前路由的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"]  // 五、传入当前路由依赖的js列表
    },
    children: [
      {  
        path: "widgets",
    。。。。。。


   }

3、http请求返回200,响应体是一个空格时，报错。

在Angular中，使用HttpClient请求时， 若是this.http.get("url"}后，响应结果不走成功，直接进入error,可是控制台中的网络中，显示状态码是200， 且控制台打印报告“Unexpected end of JSON input” ，就是这种状况了。

此时须要增长一个参数：this.http.get( url  , {responseType: 'text'});