跨选项卡的 Nativescript Angular Tabview 导航答案

【问题标题】：Nativescript Angular Tabview navigation across tabs跨选项卡的 Nativescript Angular Tabview 导航
【发布时间】：2020-05-05 17:37:37
【问题描述】：

我按照 here 的文章将我的 NS 应用设置为使用带有登录屏幕的选项卡式导航。

我正在尝试向球员页面添加一个按钮，该按钮将导航到特定球队的球队详情页面。

从我读到的内容看来，在播放器组件中使用类似的东西应该是可行的

toTeam( event: any ) {
        var teamId = event.object.team;
        this.router.navigate([
            '/tabs/default', { outlets: { teamTab: ['team', teamId] } }
        ])
    }

但我尝试过的每个变体都会导致Error: Cannot match any routes。

有人知道如何在标签/插座之间导航吗？

【问题讨论】：

标签： angular nativescript angular2-nativescript tabview

【解决方案1】：

检查你的 routing.module.ts，是否定义了路由。它需要做这样的事情。

        { path: '/tabs/default/:teamId', component: XYZComponent, outlet: 'team' },

【讨论】：

我的路由模块包含{path: "tabs", loadChildren: () => import("~/app/tabs/tabs.module").then(m => m.TabsModule)}，然后选项卡模块包含子路由，就像我在后面的文章中一样。据我所知，所有路线都存在，否则我将无法正常导航。

【解决方案2】：

我主要根据从this 问题中获得的信息找到了一个解决方案。情况略有不同，因为我的应用使用的是<page-router-outlet> 而不是<router-outlet>，并且因为应用的整体结构。

在标签组件模板中，我在底部导航中添加了一个 id，以便可以引用它

<BottomNavigation id="bnav">

在播放器组件中我添加了以下功能：

toTeam( event: any ) {
        console.log("Team ID is: " + event.object.teamId);
        // Get the topmost frame so we can get the 'bnav' view from it later
        const topmostFrame: Frame = Frame.topmost();
        // Navigate places in the outlets
        this.re.navigate(
            [
                { 
                    outlets: {  
                        teamTab: ["team", event.object.teamId],
                        playerTab: ["players"], 
                    } 
                }
            ], { relativeTo: this.activeRoute.parent });
        // Get the tabview object from the page and switch it to show the teams tab
        let bNav:TabView = <TabView>topmostFrame.page.getViewById("bnav");
        bNav.selectedIndex = 1;
    }

<page-router-outlet> 意味着我不能只导入 Page 并使用 this.page.getViewById("bnav")，因为包含播放器组件的页面不包含 <BottomNavigation>。获得最顶层的框架让我能够获得包含我需要的内容的页面。

这一切都在我的应用程序中完美运行。

【讨论】：