如何使子路由在 AngularDart 中工作？

Question

我为我的问题创建了一个小型存储库：https://github.com/zegkljan/angular-dart-router-test

应用做什么（或应该做什么）

在“主页”页面上有一个项目列表。您可以单击项目来查看项目本身。在项目视图中，您有两个按钮，单击它们时，会在按钮下方显示项目的基本/高级详细信息。

技术观点

AppComponent（根组件）有<router-outlet>，它用于显示一个子组件，它是ItemListComponent（显示列表，在路径/items上）或ItemComponent，它显示项目本身（在路径 /items/:id 上）。项目列表中的链接使用[routerLink] 导航到ItemComponent，顶部的home 链接导航到ItemListComponent。

ItemComponent 有自己的<router-outlet> 和一组路径，其partent 是项目的路径（即/items/:id）。这些路径是/basic 和/advanced，它们是相对于项目路径的（因此基本细节的完整路径是/items/:id/basic）。

有什么问题

当点击基本/高级按钮时，路由器的navigate() 方法返回NavigationResult.INVALID_ROUTE（因此没有导航），即使传递给navigate() 的url（在调用navigate() 之前打印）是正确的.如果您克隆/下载 repo 并运行应用程序，请打开浏览器控制台并观察。

我做错了什么，或者我对 AngularDart 路由器以及子路由的工作方式有什么误解？

Answer 1

您在ItemComponent 的指令列表中缺少RouterOutlet 指令（或routerDirectives，其中包括RouterOutlet）：https://github.com/zegkljan/angular-dart-router-test/blob/master/lib/src/item/item_component.dart#L23