Question

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

应用
- 网格模块
- 仪表板模块
  - dashboard-grid module
  - 图表模块

我花了一整天时间尝试获取仪表板网格模块和图表模块的链接才能正常工作，但我尝试的所有内容都会让情况变得更糟。现在，点击图表模块的链接会加载仪表板模块内的仪表板模块并导致调用堆栈限制。我已经使用设置在stackblitz上创建了一个应用程序。我希望有人可以帮我弄清楚要做什么，因为我唯一能想到的就是根本不使用路由。 stack blitz app

编辑第一个回答：

啊，这是手动设置所有内容的问题。抱歉。我的实际应用程序已定义。我之前的stackblitz和我的应用程序之间的差异是在我的应用程序中我必须做router.navigate而不是routerlink。所以我现在更新它以获得定义并使用router.navigate按钮。我也评论了我尝试过的所有相同的结果 with changes

Answer 1

回答编辑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);

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

1 个答案: