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

本文探讨了Angular中懒加载模块结合第二路由的使用方法,包括常见错误与解决方案。介绍了如何正确配置顶级路由,避免第二路由无法匹配的问题,并展示了通过routerLink和navigate激活第二路由的具体代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  第二路由,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如下:

<p>
  lazy-component works!
  <a [routerLink]="[{outlets:{popUp:['popup']}}]">通过routerlink在第二路由中显示内容</a>
  <a (click)="showPopup()">通过navigate在第二路由中显示内容</a>
</p>
<router-outlet name="popUp"></router-outlet>

 第二路由的命名为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,解决办法刚才已经说明清楚了。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值