今天完成的事：学会了怎样从登录页面跳转到后台页面，以及在后台页面如何获取数据

明天要完成的事：熟练地操作后台页面获取数据理解原理，以及了解跨域的各个步骤的含义

难题：报错太他喵的多了，一直在报错一直改

收获：

children是一组自路由的定义。

[{
  path: 'team/:id',
 component: Team,
  children: [{
    path: 'user/:name',
    component: User
  }]}]

当导航到“/team/11/user/bob”这个路径时，路由就会创建team component，并把user component放到里面。

loadChildren 是延迟加载的子路由的引用。

[{  path: 'team/:id',
  component: Team,
  loadChildren: 'user.bundle.js'}]

路由使用注册好的NgModuleFactoryLoader来获取跟team有关的NgModule。然后将其路由定义放到主路由配置文件中。

所以时候什么时候用loadChildren ？ 当你想提升性能，延迟加载某些模块时，就可以考虑这种路由加载方式了。

（ 这就是loadChildren:和component: 的区别）

2.单页面使用两个router-outlet（多个和两个原理相同）

父组件html：

复制代码

<div style="font-size:20px;">

    <router-outlet name="left"></router-outlet> 

</div>

<div style="color:red;">

    <router-outlet name="right"></router-outlet>

</div>

<--这里name对应的left和right必须和module里面的outlet相对应-->

复制代码

父组件module:

复制代码

export const rou:Routes = [

    {

        path:'',

        component:LeftComponent,

        outlet:'left'

    },

    {

        path:'',

        component:RightComponent,

        outlet:'right'

    }

]

（如何在一个页面有2个或多个可变换的组件位置）

子路由和懒加载以及全局加载还有

子路由

假设在我们 /settings 设置页面下有 /settings/profile 和 /settings/password 两个页面，分别表示个人资料页和修改密码页。setting作为一个独立的功能块，可以将其封装成一个特性模块。它拥有自己独立的路由，profile和password两个页面的路由可以设置成子路由。

import { NgModule } from ‘@angular/core‘;
import { CommonModule } from ‘@angular/common‘;
import { Routes, RouterModule } from ‘@angular/router‘;

export const ROUTES: Routes = [
  {
    path: ‘‘,
    component: SettingsComponent,
    children: [
      { path: ‘profile‘, component: ProfileSettingsComponent },
      { path: ‘password‘, component: PasswordSettingsComponent }
    ]
  }
];

@NgModule({
  imports: [
    CommonModule,//注意这里引入的CommonModule，它的作用后面会专门讲到，这里不引入的话页面会报错

    RouterModule.forChild(ROUTES)
  ],
})
export class SettingsModule {}

在SettingsModule 模块中我们使用forChild()方法，因为SettingsModule不是我们应用的主模块。

另一个主要的区别是我们将 SettingsModule 模块的主路径设置为空路径 (‘‘)。因为如果我们路径设置为 /settings，它将匹配 /settings/settings。通过指定一个空的路径，它就会匹配 /settings 路径。

懒加载：loadChildren

在根模块AppModule中配置setting模块的路由信息：

export const ROUTES: Routes = [
  {
    path: ‘settings‘,
    loadChildren: ‘./settings/settings.module#SettingsModule‘
  }
];

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot(ROUTES)
  ],
  // ...
})
export class AppModule {}

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

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

需要导入模块的相对路径

#分隔符

导出模块类的名称

TODO LIST

一、【10：30】
angular任务  登陆/请求数据实现                已完成  

二、【15：30】
angular任务  创建组件创建组件内容           进行中                     
                     
三、【20：30】
angular任务  总结步骤                              未完成