我有一个有角度的应用程序正在延迟加载模块。
首先,应用程序导航到home
它加载模块(名为module1
) :
主要路由:
const routes: Routes = [
{ path: "", redirectTo: "/home", pathMatch: "full" },
{ path: "home", loadChildren: "./module1/module1.module#Module1Module" },
];
At module1
- 还有路由表:
const routes: Routes = [
{
path: "", component: Home1Component,
children: [
{ path: 'bird', outlet: 'under', component: Home2Component }
]
}
];
因此,由于它是延迟加载的,因此当应用程序启动时 - 它会转到/home
它在那里加载Home1Component
But Home1Component
里面还有一个按钮,可以设置一个值出口路线 .
home1.component.html:
<input value="click to activate aux route" type="button" (click)="go()"/>
<router-outlet ></router-outlet>
<router-outlet name='under'></router-outlet> //<---- I want to activate only this
这就是我尝试激活出口路线的方法:
public go() {
this.router.navigate([{ outlets: { under: ['bird'] } }], { relativeTo: this.route })
}
但我收到一个错误:
错误:无法匹配任何路由。 URL 段:“主页”
问题 :
为什么我会收到此错误以及如何修复它?
在线代码在这里:Stackblitz https://stackblitz.com/edit/angular-cfirad?file=app/module1/home1/home1.component.ts