如何让子路由在 AngularDart 中工作？
How to make child routes work in AngularDart?
我创建了一个小型存储库来解决我的问题：https://github.com/zegkljan/angular-dart-router-test
应用程序的功能（或应该执行的功能）
在 "home" 页面上有一个项目列表。您可以单击将您带到项目本身视图的项目。在项目视图中，您有两个按钮，单击它们会在按钮正下方显示 basic/advanced 项目的详细信息。
技术观点
AppComponent（根组件）有 <router-outlet> 用于显示子组件，该子组件是 ItemListComponent（显示列表，在路径 /items) 或显示项目本身的 ItemComponent（在路径 /items/:id 上）。项目列表中的 link 使用 [routerLink] 导航到 ItemComponent，顶部的 home link 导航到 ItemListComponent .
ItemComponent 有自己的 <router-outlet> 和一组路径，其部分是项目的路径（即 /items/:id）。这些路径是 /basic 和 /advanced，它们与项目的路径相关（因此基本详细信息的完整路径将是 /items/:id/basic）。
什么问题
单击 basic/advanced 按钮时，路由器 returns NavigationResult.INVALID_ROUTE 的 navigate() 方法（因此没有导航），即使 url传递给 navigate()（在调用 navigate() 之前打印）是正确的。如果您 clone/download 存储库和 运行 应用程序，请打开浏览器控制台并观察。
我做错了什么，或者我对 AngularDart 路由器和子路由的工作方式有什么误解？
您在此处 ItemComponent 的指令列表中缺少 RouterOutlet 指令（或包含 RouterOutlet 的 routerDirectives）：https://github.com/zegkljan/angular-dart-router-test/blob/master/lib/src/item/item_component.dart#L23
我创建了一个小型存储库来解决我的问题：https://github.com/zegkljan/angular-dart-router-test
应用程序的功能（或应该执行的功能）
在 "home" 页面上有一个项目列表。您可以单击将您带到项目本身视图的项目。在项目视图中，您有两个按钮，单击它们会在按钮正下方显示 basic/advanced 项目的详细信息。
技术观点
AppComponent（根组件）有 <router-outlet> 用于显示子组件，该子组件是 ItemListComponent（显示列表，在路径 /items) 或显示项目本身的 ItemComponent（在路径 /items/:id 上）。项目列表中的 link 使用 [routerLink] 导航到 ItemComponent，顶部的 home link 导航到 ItemListComponent .
ItemComponent 有自己的 <router-outlet> 和一组路径，其部分是项目的路径（即 /items/:id）。这些路径是 /basic 和 /advanced，它们与项目的路径相关（因此基本详细信息的完整路径将是 /items/:id/basic）。
什么问题
单击 basic/advanced 按钮时，路由器 returns NavigationResult.INVALID_ROUTE 的 navigate() 方法（因此没有导航），即使 url传递给 navigate()（在调用 navigate() 之前打印）是正确的。如果您 clone/download 存储库和 运行 应用程序，请打开浏览器控制台并观察。
我做错了什么，或者我对 AngularDart 路由器和子路由的工作方式有什么误解？
您在此处 ItemComponent 的指令列表中缺少 RouterOutlet 指令（或包含 RouterOutlet 的 routerDirectives）：https://github.com/zegkljan/angular-dart-router-test/blob/master/lib/src/item/item_component.dart#L23