angular 在具有子路由的延迟加载模块中进行路由

Question

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

应用
- 网格模块
- 仪表板模块
  - 仪表板网格模块
  - 图表模块

我花了一整天的时间试图让 links 到 dashboard-grid-module 和 chart-module 工作，但我尝试的一切只会让事情变得更糟。现在到了点击 link 图表模块加载仪表板模块内部仪表板模块并导致调用堆栈限制的地步。我已经使用设置在 stackblitz 上创建了一个应用程序。希望有人能帮我弄清楚该怎么做，因为我唯一能想到的就是根本不使用路由。 stack blitz app

编辑第一个答案：

啊，这就是手动设置所有内容的问题。对不起。我的实际应用程序定义了那些。我之前的 stackblitz 和我的应用程序之间的区别在于，在我的应用程序中，我必须执行 router.navigate 而不是路由器 link。所以我现在更新了它以具有定义并使用带有 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);

angular 在具有子路由的延迟加载模块中进行路由

angular routing in lazy loaded module with child routes

angular

angular-router