Nativescript Angular Error: Cannot match any routes using TabStrip

Question

在我的 Nativescript+Angular 应用程序中，我正在使用带 TabStrip 的 BottomNavigation。

app.routing.ts:

const routes: Routes = [
 { path: "", redirectTo: "/login", pathMatch: "full" },
 { path: "login", component: LoginComponent },
 { path: "tabsWrapper", component: TabsWrapperComponent, loadChildren: "./tabsWrapper/tabsWrapper.module#TabsWrapperModule", canActivate: [AuthGuard] }
];

登录后，我导航到 tabsWrapper:

this.routerExtensions.navigate(["tabsWrapper"], { clearHistory: true }).catch(err => console.log(err));

这是taspWrapper的路由，tabsWrapper-routing.module.ts:

const routes: Routes = [
{
    path: "",
    redirectTo: "home",
    pathMatch: "full"
},
{ path: "home", loadChildren: "../home/home.module#HomeModule", outlet: "homeTab" },
{ path: "subscriptions", loadChildren: "../subscriptions/subscriptions.module#SubscriptionsModule", outlet: "subscriptionsTab" }
];

有两个选项卡，"Home" 选项卡和 "Subscriptions" 选项卡；有两个 lazy-loaded 个模块。

tabsWrapper.component.html:

<BottomNavigation selectedIndex="0" (selectedIndexChanged)="onSelectedIndexChanged($event)">
    <TabStrip (itemTap)="onItemTapped($event)">
        <TabStripItem title="home">
            <Label class="tab-title" text="Home"></Label>
        </apabStripItem>
        <TabStripItem title="subscriptions">
            <Label class="tab-title" text="Subscriptions"></Label>
        </TabStripItem>
    </TabStrip>

    <TabContentItem>
        <GridLayout>
            <page-router-outlet name="homeTab"></page-router-outlet>
        </GridLayout>
    </TabContentItem>
    <TabContentItem>
        <GridLayout>
            <page-router-outlet name="subscriptionsTab"></page-router-outlet>
        </GridLayout>
    </TabContentItem>
</BottomNavigation>

这是home模块的路由 home-routing.module.ts:

const routes: Routes = [
{ path: "", redirectTo: "home" },
{ path: "itemDetails/:itemId", component: ItemDetailsComponent },
{ path: "home", component: HomeComponent }
];

在主页组件中，有一些服务检索到的项目。当我点击它们时，它会正确重定向到项目详细信息页面。对于 UI 选择，我无法在 header 上放置后退按钮，所以我想做的是，如果我在项目详细信息页面中，如果我点击“主页”选项卡，它必须回家（我不能只使用 navigation.back()，因为那样的话我将不得不添加一些路线，从详细信息页面将您带到第二个详细信息页面）。

如您所见，我在 tabsWrapper 组件上添加了 (itemTap)="onItemTapped($event)"，它必须处理以下行为：

  onItemTapped(newIndexObj) {
   const isInSameTab = newIndexObj.index === this.selectedTab ? true : false;
   if (isInSameTab) {
  if (this.selectedTab === 0) {
    this.routerExtensions.navigate(['../home'], {
      clearHistory: true
    });

    /*
    this.routerExtensions.navigate(['/tabsWrapper/{homeTab:home}/home'], {
      clearHistory: true
    }); 

    this.routerExtensions.navigate(['/tabsWrapper/'], {
      clearHistory: true
    }); 
    this.router.navigate(["../"], {  });
    */

    }

  }
 }

如您所见，我尝试了很多方法，但其中 none 有效；如果我使用 "home" 它会给我错误 "Error: Cannot match any routes. URL Segment: 'home'"，如果我使用 "tabsWrapper".

也是一样

因此，我在 "home" 选项卡内的详细信息页面中，按下 "Home" 选项卡，我想从详细信息页面返回到项目列表（路线“ /home" 的 home.module.ts 模块），这是 app 的结构：

登录
tabsWrapper
- 家
  - 主页 <-------- 到这里
  - itemDetails/:itemId <-------- 来自这里
  - subitemDetails/:itemId/:secondItemId（这个以后再补充）
- 订阅
  - .....
  - .......（会有类似的行为）

如果有帮助，我在 onItemTapped() 函数中放置了一个断点并调试 this.router.url: "/tabsWrapper/(homeTab:home/itemDetails/6f92b723-7938-4d26-9262-a3f92846b3c8 //订阅标签:subscriptions/subscriptions)"

Answer 1

根据场景，可以在angular路由中使用relativeTo属性

目前activatedRoute是tabsWrapper/home/itemDetails:itemId。从这个路由，angular 不知道抛出错误的主路由。

尝试使用，

在 component.ts 文件中：

export class Dummy {
    constructor(private router: Router, private route: ActivatedRoute) {}

    goTo() {
        this.router.navigate(['../home], { relativeTo: this.route })
    }
}

希望这有效。

Answer 2

我找到了解决方案：

this.router.navigate([{ outlets: { "homeTab": ["home"] } }], { relativeTo: this.route });

我不得不明确出口

Nativescript Angular Error: Cannot match any routes using TabStrip

Nativescript Angular Error: Cannot match any routes using TabStrip

angular

nativescript

bottomnavigationview

nativescript-angular

tabstrip