Angular-如何使用延迟加载的模块激活AUX路由?

问题描述

我有一个角度应用程序，它在延迟加载模块.

I have an angular app which is loading lazily module.

首先，该应用程序导航到home并在其中加载模块(名为module1):

At first the app is navigating to home where it loads the module ( named module1) :

主路由:

const routes: Routes = [
    { path: "", redirectTo: "/home", pathMatch: "full" },
    { path: "home", loadChildren: "./module1/module1.module#Module1Module" },

];

在module1-还有路由表:

const routes: Routes = [
    {
        path: "", component: Home1Component,
        children: [
            { path: 'bird', outlet: 'under', component: Home2Component }
        ]
    }
];

因此，由于延迟加载，因此在应用启动时-转到/home，在此加载Home1Component

So since it's loading lazily , when the app starts - it goes to /home where there it loads the Home1Component

但是Home1Component中也有一个按钮，该按钮应该为出口路线设置一个值.

But Home1Component also has a button in it which suppose to set a value to the outlet route .

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

这是我尝试激活出口路线的方法:

This is how I try to activate the outlet route :

  public go() {
    this.router.navigate([{ outlets: { under: ['bird'] } }], { relativeTo: this.route })
  }

但是我得到一个错误:

问题:

为什么会出现此错误，我该如何解决?

Why am I getting this error and how can I fix it ?

此处的在线代码: Stackblitz

推荐答案

在@ jmw5598的帮助下，我向我介绍了路由器的问题/错误.

Well with the help of @jmw5598 who referenced me to the problem/bug with the router .

延迟加载的模块的默认空位置存在问题.

There is a problem with default empty location for lazy loaded modules.

这是该问题的有效解决方案.

要理解的关键是，惰性模块不应具有空的根路径

The key thing to understand is that lazy modules should not have empty root path

相关的具体描述 :

这篇关于Angular-如何使用延迟加载的模块激活AUX路由?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！