Nativescript Angular Tabview跨标签导航

Question

我按照下面的说明，将我的NS应用设置为使用带有登录界面的标签式导航。此处.

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

从我所读到的内容来看，似乎可以在球员组件中添加这样的按钮。

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

但我尝试过的每一种变化都会导致 Error: Cannot match any routes.

有谁知道如何跨tabsoutlets导航？

Answer 1

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

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

Answer 2

我找到了一个解决方案，主要是基于我从 这个 问题。事情略有不同，因为我的应用程序使用的是 <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>. 得到最上面的框架让我得到了包含我需要的页面。

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