NativeScript Angular - 无法在位于不同页面路由器插座的同级视图之间导航

Question

我有这个TabView 组件：

<TabView androidTabsPosition="bottom">
  <page-router-outlet *tabItem="{title: 'Item 1'}" name="map"></page-router-outlet>
  <page-router-outlet *tabItem="{title: 'Item 2'}" name="subscribe"></page-router-outlet>
</TabView>

路由器配置：

  {
    path: '',
    redirectTo: '/(map:map//subscribe:subscribe)',
    pathMatch: 'full'
  },
  {
    path: 'map',
    loadChildren: '~/app/routes/+map/map.module#MapModule',
    outlet: 'map'
  },
  {
    path: 'subscribe',
    loadChildren: '~/app/routes/+subscribe/subscribe.module#SubscribeModule',
    outlet: 'subscribe'
  }

在 SubscribeModule 功能模块中，我有一个函数应该导航到 map 路由：

// The NativeScript router service
constructor(private router: RouterExtensions) {}

navigate(args) {

  const item = this.items[args.index];

  this.router.navigate(['map'], {
    transition: {
      name: 'slideLeft',
      duration: 300
   }
  });
}

但我得到的只是Error: Cannot match any routes. URL Segment: 'map'。

我也尝试了以下方法：

• 使用this.router.navigate([{outlets: {map: 'map'}}] 导航到指定的出口
• 使用this.router.navigate(['../', 'map']) 导航
• 使用navigateByUrl 导航

但它们都产生相同的结果。

我做错了什么？

Answer 1

请在下面试试

this.router.navigate(["/map"], { 过渡： { 名称：'slideLeft'， 持续时间：300 } });

尝试在组件中添加私有 activeRoute: ActivatedRoute

this.router.navigate([{ outlets: { search: ["map"] } }], { relativeTo: this.activeRoute });