带有子路由的延迟加载模块中的角路由

杰森

我有一个应用程序,其中每个模块都是延迟加载的。结构为:

  • 应用程式
    • 网格模块
    • 仪表板模块
      • 仪表板网格模块
      • 图表模块

我已经花了整整一天的时间尝试使指向仪表板网格模块和图表模块的链接正常工作,但是我所做的一切只会使情况变得更糟。现在,单击图表模块的链接将仪表板模块加载到仪表板模块内,并导致调用堆栈限制。我已经使用设置在stackblitz上创建了一个应用程序。希望有人可以帮助我弄清楚该做什么,因为我唯一想到的就是根本不使用路由。堆栈闪电战应用

编辑第一个答案:

嗯,这就是手动设置所有内容的问题。抱歉。我的实际应用程序已定义。现在我之前的stackblitz和我的应用程序之间的区别在于,在我的应用程序中,我必须执行router.navigate而不是routerlink。因此,我现在对其进行了更新,使其具有定义,并在router.navigate中使用了按钮。我也注释掉了我尝试过的所有结果但都做出了相同的更改

舒马玛·瓦希德(Sumama Waheed)

答案编辑1:

更改此:

<button (click)="doIt('lazy1')">Lazy 1</button> // wrong name
<button (click)="doIt('lazy2')">Lazy 2</button> // wrong name

this.router.navigate(['/' + route]);

至:

<button (click)="doIt('lazychild1')">Lazy 1</button>
<button (click)="doIt('lazychild2')">Lazy 2</button>

this.router.navigate(['/lazy/' + route]);

https://stackblitz.com/edit/angular-rnehv2

原始答案

您在子模块中缺少路由定义。没有路由,模块将不知道要渲染哪个组件。

工作示例:https//stackblitz.com/edit/angular-fkicz7

const routes: Routes = [
    {
        path: '',
        component: LazyChild1Component
    }
];

export const routing = RouterModule.forChild(routes);

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章