嵌套命名的多路由问题

Question

我正在尝试设置应用程序的基本结构和选项卡导航，但我运行遇到了嵌套路由问题（至少显然这是问题的根源）。

我已经确定了问题，您可以找到文件 on this Playground 来重现错误。

我在应用程序中激活了跟踪，抛出的错误是：

NavigationError(id: 2, url: '/home/(newTaskTab:create//browseTasksTab:browse//accountsTab:account)', error: Error: Cannot match any routes. URL Segment: 'home')

尽管 /home 已加载，但它仍在抱怨 URL Segment: 'home'，这让我感到困惑，因为我可以看到底部的标签导航。但是 none 本应在这些选项卡中加载的模块出现了（它们只是非常简单的占位符模块，只有一个组件，每个组件都有一个标签）

我花了相当多的时间将我的代码与 guide's code 进行比较。

非常欢迎任何指点。

编辑： 我也试过删除模块/延迟加载。我将它们剥离出来，在 app-routing.module.ts 中完成所有路由，将路径直接绑定到各个组件。我发现的一件事是，如果我将根路由定义为 { path: '', redirectTo: '/home/(newTaskTab:create//browseTasksTab:browse//accountsTab:account)', pathMatch: 'full' }，则上面的相同 NavigationError 会在应用程序加载时立即抛出，而 HomeComponent 根本不会加载。如果我将它定义为 { path: '', redirectTo: '/home', pathMatch: 'full' }，那么 HomeComponent 会加载，但是 children 的 none 会加载，即使我在 HomeComponent.ts 中有这个：

ngOnInit() {
        this.routerExtension.navigate(
            [{ outlets: { newTaskTab: ["create"], browseTasksTab: ["browse"], accountsTab: ["account"] } }],
            { relativeTo: this.activeRoute }
        )
}

我得到了与 .navigate 方法调用相同的结果 NavigationError。

Answer 1

NativeScript Community Slack workspace 上的好心人（再次感谢你，Frank，如果你偶然发现了这个）帮助我解决了这个问题。除了其中一个出口名称中的一个小拼写错误（它只出现在我的代码的精简版本中，我提供它来说明问题），问题归结为两件事：

将每个 <page-router-outlet> 包装在包含选项卡的模板中的 <StackLayout> 中
在同一组件中，您似乎需要一个包含 children 路由的命名路由。最初我在根路由下定义了 children 。解决方案是从根路由重定向到另一条路由（称为“选项卡”），这又为每个选项卡的出口定义了 children 路由。
（可能不是必需的）更改 tsconfig.json 以正确定义应用程序的根文件夹，然后将模块的导入语句更改为绝对路径，而不是相对路径（例如 "~/app/browse/browse.module"）

代码可以在this repo on my GitHub中找到。主分支有两个提交：第一个提交显示问题，第二个提交提供解决方案。

嵌套命名的多路由问题

Issues with nested named, multiple routes

angular

nativescript-angular