Angular第二路由named outlet在懒加载中的bug解决方案

  第二路由，named outlet，也叫命名路由。一个template中只允许有一个无名主路由与多个named outlet。named outlet一般用来做弹框，弹窗使用，弹框只有手动关闭才能关闭，否则即使页面切换，页面中仍然会有弹窗存在。接下来介绍一个在懒加载模块中的第二路由的使用，在使用过程中会发现一个bug以及如何避免该bug。

  创建一个新的模块，该模块在app模块中通过懒加载进行加载。

app路由模块中是通过懒加载对lazy module进行加载的：

const routes: Routes = [
  {
    path:'',
    redirectTo:'/home',
    pathMatch:'full'
  },
  {
    path:'home',
    component:HomeComponentComponent,
  },
  {
    path:'list',
    component:ListComponentComponent,
  },
  {
    path:'lazyLoad',
    loadChildren:'./home/lazy-module/lazy-module.module#LazyModuleModule'
  }
];

 在lazy模块中，我们主要呈现第二路由的使用，以及第二路由使用中出现的bug。

先看lazy模块中的路由情况，

const routes: Routes = [{
  path:'lazy',
  component: LazyComponentComponent,
  children:[
    {
      path:'popup',
      component:PopupComponent,
      outlet:'popUp'
    }
  ]

},
  {
    path:'',
    redirectTo:'lazy',
    pathMatch:'full'
  }
];

 top-level的路由path不为空，路径为path。这里先说结果：

懒加载的模块中如果有第二路由，最顶部的路由path需要有名称，不能为空，否则第二路由的使用将会出现无法匹配路由的错误。

lazy模块中有一个第二路由，template如下：

  lazy-component works!
  通过routerlink在第二路由中显示内容
  通过navigate在第二路由中显示内容

 第二路由的命名为popUp,并且页面上通过两种方式显示popUp,第一种是routerLink，第二种是通过navigate，第二种方法具体如下：

  showPopup(){
    this.router.navigate([{outlets:{popUp:['popup']}}],{relativeTo:this.activedRouter})
  }

需要注意navigate的第二个参数，{relativeTo:this.activedRouter}，如果没有这个参数的话也会报错：

Cannot match any routes. URL Segment: 'popup'
Error: Cannot match any routes. URL Segment: 'popup'。

navigate是相对根路径的，所以需要增加一个相对路由，也可以使用navigateByUrl，此时写上全路径也可以直接跳转。 

如果路由设置如下：

[
{
  path:'lazy',
  component: LazyComponentComponent,
},
{
  path:'popup',
  component:PopupComponent,
  outlet:'popUp'
},
  {
    path:'',
    redirectTo:'lazy',
    pathMatch:'full'
  }
]

那么在使用第二路由的时候将会报如下错误：

这是官方的一个bug，解决办法刚才已经说明清楚了。