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

Question

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

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

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

技术观点

AppComponent（根组件）<router-outlet>用于显示子组件，该子组件要么是ItemListComponent（在 path 上显示列表/items），要么是ItemComponent显示项目本身（在 path 上/items/:id）的子组件。项目列表中的链接[routerLink]用于导航到，顶部ItemComponent的链接用于导航到。homeItemListComponent

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

问题是什么

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

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

标签： angularroutingangular-dartangular-dart-routing

Answer 1

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