延迟加载模块中的 Nativescript Angular TabView + <page-router-outlet>答案

【问题标题】：Nativescript Angular TabView + <page-router-outlet> in a lazy loaded module延迟加载模块中的 Nativescript Angular TabView + <page-router-outlet>
【发布时间】：2019-09-20 12:59:52
【问题描述】：

我正在使用 Nativescript-Angular (~7.1.0) 构建一个移动应用程序，其中 App.component 使用 RadSideDrawer 导航模式，而延迟加载的模块使用 TabView 导航模式。（此处参考：https://docs.nativescript.org/angular/core-concepts/angular-navigation）。

我遇到的问题是我无法在延迟加载模块中实现工作路由配置。

作为一个简化的例子，我的引导组件在 App 模块中，而延迟加载的模块是 Admin 模块。

在 app-routing.module.ts 中，我的路由定义如下：

const routes: Routes = [
  { path: "admin", loadChildren: "~/app/admin/admin.module#AdminModule" },
  ...
];

在app.component.html中，我的模板定义如下：

<RadSideDrawer ...>
  <GridLayout (tap)="goToModule('/admin')">
    ...
  </GridLayout>
  ...
</RadSideDrawer>

在admin-routing.module.ts中，我的子路由定义如下：

const routes: Routes = [
  { path: '', redirectTo: '/(tabOneOutlet:tabOnePath//tabTwoOutlet:tabTwoPath)', pathMatch: 'full' },
  { path: 'tabOnePath', component: TabOneComponent, outlet: 'tabOneOutlet' },
  { path: 'tabTwoPath', component: TabTwoComponent, outlet: 'tabTwoOutlet' }
];

admin.component 模板定义如下：

<TabView androidTabsPosition="bottom">
  <page-router-outlet *tabItem="{title: 'ONE'}" name="tabOneOutlet"></page-router-outlet>
  <page-router-outlet *tabItem="{title: 'TWO'}" name="tabTwoOutlet"></page-router-outlet>
</TabView>

我想在管理模块中使用<page-router-outlet> 的原因是具有前进和后退导航功能并利用 Nativescript ActionBar 小部件，因为我在管理模块中有多个页面。

（根据 Nativescript 文档 - '使用 page-router-outlet 带来了在组件中使用 ActionBar 小部件的额外好处。在 iOS 上，当导航到第二页时，小部件会自动添加后退按钮。在 Android 上，page-router-outlet 受益于硬件后退按钮，它可以导航回您的组件。'）

通过上述路由配置，Angular 正在抛出Error: Cannot match any routes. URL Segment: 'tabOnePath'

这是我尝试过的一些事情。

我尝试直接在App.component.html 中实现<TabView>，使用虚拟组件替换<RadSideDrawer>。例如，

App.component.html

<TabView androidTabsPosition="bottom">
  <page-router-outlet *tabItem="{title: 'DUMMY ONE'}" name="dummyOneOutlet"></page-router-outlet>
  <page-router-outlet *tabItem="{title: 'DUMMY TWO'}" name="dummyTwoOutlet"></page-router-outlet>
</TabView>

App-routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: '/(dummyOneOutlet:dummyOnePath//dummyTwoOutlet:dummyTwoPath)', pathMatch: 'full' },
  { path: 'dummyOnePath', component: DummyOneComponent, outlet: 'dummyOneOutlet' },
  { path: 'dummyTwoPath', component: DummyTwoComponent, outlet: 'dummyTwoOutlet' }
];

而且它有效。

由于redirectTo 采用绝对路径，我也尝试了不同的路径排列，但仍然出现Cannot match any routes 错误。

目前，我通过将我的管理组件选择器直接嵌入选项卡项中并在admin-routing.module.ts 中定义横向路由来使管理模块工作。但这并不是我想要的。

非常感谢任何帮助或大体方向。

【问题讨论】：

应用路由模块中有重定向调用吗？可以分享一个 Playground 示例吗？
您现在找到解决问题的方法了吗？我有一个类似的问题，你真的对你的解决方案很感兴趣。

标签： angular nativescript nativescript-angular

【解决方案1】：

看来这篇文章可能有用

https://www.nativescript.org/blog/using-nested-router-outlets-with-nativescript-and-angular

它说：“命名的路由器出口仅与根路由器出口一起工作，因为每次我们调用导航时，页面路由器出口都会导航到一个完全不同的页面。”

正如我在给定的示例中看到的，您正在尝试将<page-router-outlet> 与命名路由一起使用。

【讨论】：