Nativescript Angular Tabview 跨选项卡导航 [英] Nativescript Angular Tabview navigation across tabs

问题描述

我按照 此处.

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

I am trying to add a button to the players page that will navigate to the team details page for a specific team.

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

From what I have read it seems like it should be doable with something like this in the players component

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

但是我尝试过的每个变体都会导致错误:无法匹配任何路由.

But every variation that I have tried results in Error: Cannot match any routes.

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

Does anybody know how to navigate across tabs/outlets?

推荐答案

我主要根据从 这个 问题.情况略有不同，因为我的应用使用的是 而不是 并且由于应用的整体结构.

I found a solution mostly based on the information I got from this question. Things were slightly different because my app is using <page-router-outlet> instead of <router-outlet> and because of the overall structure of the app.

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

In the tabs component template I added an id to the bottom navigation so it could be referenced

<BottomNavigation id="bnav">

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

in the players component I added the following function:

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 并使用 this.page.getViewById("bnav") 因为页面包含的播放器组件不包含 .获取最顶层的框架使我能够获取包含所需内容的页面.

The <page-router-outlet> meant I couldn't just import Page and use this.page.getViewById("bnav") because the page that the players component is contained within does not encompass the <BottomNavigation>. Getting the topmost frame allowed me to get the page that contained what I needed.

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

This all works perfectly in my application.

这篇关于Nativescript Angular Tabview 跨选项卡导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！