Question

我正在使用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>

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

（根据Nativescript文档-'使用page-router-outlet具有在组件中使用ActionBar小部件的附加好处。在iOS上，小部件导航到第二页时会自动添加后退按钮。在Android上，页面路由器插座可从硬件后退按钮受益，该按钮可向后导航组件。'）

使用上述路由配置，Angular会抛出Error: Cannot match any routes. URL Segment: 'tabOnePath'

以下是我尝试过的一些方法。

我尝试直接在<TabView>中实现App.component.html，使用虚拟组件替换<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组件选择器直接嵌入到选项卡项中并在admin-routing.module.ts中定义横向路线，我使Admin模块可以工作。但这不是我想要的。

任何帮助或一般指导将不胜感激。

Answer 1

这篇文章似乎有用

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

它说：“具名的路由器出口仅在根部与路由器出口一起工作，因为每次我们将导航称为页面路由器出口都导航到一个不同的页面时。”

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

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

1 个答案: