0

在我的 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" }
];

有两个选项卡，“主页”选项卡和“订阅”选项卡；有两个延迟加载的模块。

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-routing.module.ts 的路由：

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

在 home 组件中有一些由服务检索的项目。当我点击它们时，它会正确重定向到项目详细信息页面。对于 UI 选择，我不能在标题上放一个后退按钮，所以我想做的是，如果我在项目详细信息页面中，如果我点击主页选项卡，它必须返回主页（我可以'不要只使用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(["../"], {  });
    */

    }

  }
 }

如您所见，我尝试了很多方法，但都没有奏效；如果我使用“home”，它会给我错误“错误：无法匹配任何路由。URL 段：'home'”，如果我使用“tabsWrapper”，则相同。

因此，我在“主页”选项卡内的详细信息页面中，通过按下“主页”选项卡，我想从详细信息页面返回项目列表（home.module 的路径“/home”。 ts 模块），这是应用程序的结构：

  • 登录
  • 标签包装器
    • 家
      • 主页 <-------- 到这里
      • itemDetails/:itemId <-------- 从这里
      • subitemDetails/:itemId/:secondItemId （这个我必须稍后添加）
    • 订阅
      • ......
      • .....（会有类似的行为）

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

4

2 回答 2

3

我找到了解决方案：

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

我必须明确出口

于 2020-01-03T11:12:33.280 回答
1

根据场景，您可以在角度路由器中使用 relativeTo 属性。

目前激活的路由是 tabsWrapper/home/itemDetails:itemId。从这条路线中，角度不知道引发错误的主路线。

尝试使用，

在 component.ts 文件中：

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

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

希望这有效。

于 2020-01-03T10:00:11.793 回答