Nativescript Angular 跨选项卡的 Tabview 导航

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。

有人知道如何在 tabs/outlets 中导航吗？

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

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

Nativescript Angular 跨选项卡的 Tabview 导航

Nativescript Angular Tabview navigation across tabs

angular

nativescript

angular2-nativescript

tabview