发表于: 2019-07-30 20:42:30

1 934


今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin) 
明天计划的事情:(一定要写非常细致的内容) 
遇到的问题:(遇到什么困难,怎么解决的) 
收获:(通过今天的学习,学到了什么知识)

1.练习Angular 懒加载的实现

1、RouterModule.forRoot() 和 RouterModule.forChild()

    RouterModule对象为提供了两个静态的方法:forRoot()和forChild()来配置路由信息。

    RouterModule.forRoot()方法用于在主模块中定义主要的路由信息.

    RouterModule.forChild()与 Router.forRoot()方法类似,但它只能应用在特性模块(子模块)中。

    即根模块中使用forRoot(),子模块中使用forChild()。

2、懒加载:loadChildren

    这里使用到了懒加载LoadChildren属性。这里没有将对应的模块导入到AppModule中,而是通过loadChildren属性,告诉Angular路由依据loadChildren属性配置的路径去加载对应的模块。这就是模块懒加载功能的具体应用,当用户访问 /xxx/** 路径的时候,才会加载对应的模块,这减少了应用启动时加载资源的大小。

    loadChildren的属性值由三部分组成:

        需要导入模块的相对路径

        #分隔符

        导出模块类的名称

懒加载的实现

1、创建项目

ng new angularLaod --routing (生成默认带有routing module 的项目)

 执行 --routing会执行以下步骤

        创建app-routing.module.ts

        将app-routing.module.ts导入到app.module.ts

        在app.component.html添加<router-outlet></router-outlet>


2、生成子模块

ng g m childrenLaod --routing


3、在组件中声明component

ng g c children-load/child

在children-load-routing中添加路由默认路径

import {ChildComponent} from './child/child.component'; const routes: Routes = [ {path:'',component:ChildComponent} ];

  重复步骤 2、3、4生成children-newload


4、在app-routing.module模块中导入children-load模块

const routes: Routes = [

  {path:'',redirectTo:'child'},

  {path:'child',loadChildren:'./children-load/children-load.module#ChildrenLoadModule'},

  {path:'childNew',loadChildren:'./children-newload/children-newload.module#ChildrenNewloadModule'}

];


2.数组的解构赋值 

let node = {

    type:"Identifier",

    name:"foo"

},

 

type = "Literal",

name = 5;

//使用解构语法为多个变量赋值

({type,name} = node);

 

console.log(type);//"Identifier"

console.log(name);//"foo"

注意:一定要用一对小括号包裹解构赋值语句,javascript引擎将一对开放的花括号视为一个代码块,而语法规定,代码块不能出现在赋值语句的左侧,添加小括号后可以将块语句转化为一个表达式,从而实现整个解构赋值的过程。



let [head, ...tail] = [1, 2, 3, 4];

head // 1

tail // [2, 3, 4]


let [x, y, ...z] = ['a'];

x // "a"

y // undefined

z // []



返回列表 返回列表
评论

    分享到