Question

我通过遵循文字here，将NS应用设置为使用带登录屏幕的选项卡式导航。

我正在尝试向玩家页面添加一个按钮，该按钮将导航到特定团队的团队详细信息页面。

从我阅读的内容来看，似乎应该可以在播放器组件中使用这种功能

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

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

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

Answer 1

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

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

Answer 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>。获取最顶部的框架使我可以获取包含所需内容的页面。

这一切在我的应用程序中都很好。

跨选项卡的Nativescript Angular Tabview导航

2 个答案: