Nativescript Angular Просмотр вкладок по вкладкам - PullRequest
Новая
       53

Nativescript Angular Просмотр вкладок по вкладкам

0 голосов
/ 05 мая 2020

Я настраиваю свое приложение NS для использования навигации с вкладками с экраном входа в систему, следуя описанию здесь .

Я пытаюсь добавить кнопку на страницу игроков, которая будет переходить к Страница сведений о команде для конкретной c команды.

Из того, что я прочитал, похоже, что это должно быть выполнено с чем-то вроде этого в компоненте плееров 

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

Но каждый вариант, который я пробовал, приводит к Error: Cannot match any routes.

Кто-нибудь знает, как перемещаться по вкладкам / выходам?

Ответы [ 2 ]

0 голосов
/ 06 мая 2020

Я нашел решение в основном на основе информации, которую я получил из этого вопроса. Все было немного по-другому, потому что мое приложение использует <page-router-outlet> вместо <router-outlet> и из-за общей структуры приложения.

В шаблоне компонента вкладок я добавил идентификатор в нижнюю панель навигации, чтобы он мог быть ссылаясь на 

<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>. Получение самого верхнего фрейма позволило мне получить страницу, содержащую то, что мне нужно.

Все это отлично работает в моем приложении.

0 голосов
/ 05 мая 2020

Проверьте в своем routing.module.ts, определен ли маршрут. Это нужно сделать примерно так. 

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