Question

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

我已找出问题所在，您可以找到文件on this Playground来重现该错误。

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

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

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

我花了很多时间将我的代码与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，但即使HomeComponent.ts中有此子项，也不会加载任何子项：

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

通过NavigationError方法调用，我得到了相同的.navigate。

Answer 1

在NativeScript社区Slack工作区，一个善良的人（再次感谢，弗兰克，如果您偶然发现了这一点）帮助我解决了这个问题。除了其中一个出口名称中的小错字（仅出现在我的代码的精简版中，我提供了该数字以说明问题）之外，问题还可以归结为两点：

将每个<page-router-outlet>包装在保存标签的模板中的<StackLayout>中
在同一组件中，似乎您需要具有一个保存子路由的命名路由。最初，我已经在根路径下定义了子代。解决方案是从根路由重定向到此其他路由（称为“标签”），这又为每个标签的出口定义了子级路由。
（可能不是必需的）更改了tsconfig.json以正确定义应用程序的根文件夹，然后将模块的import语句更改为绝对路径，而不是相对路径（例如"~/app/browse/browse.module"）

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

嵌套的命名多条路线

1 个答案: