Переход от компонента Button к вкладке в TabView с использованием NativeScript Angular - PullRequest
Новая
       14

Переход от компонента Button к вкладке в TabView с использованием NativeScript Angular

0 голосов
/ 27 апреля 2019

У меня настроен TabView в app.component.html: 

<TabView androidTabsPosition="bottom">
    <page-router-outlet
        *tabItem="{title: 'Home', iconSource: getIconSource('home')}"
        name="homeTab">
    </page-router-outlet>
    <page-router-outlet
        *tabItem="{title: 'Game', iconSource: getIconSource('browse')}"
        name="gameTab">
    </page-router-outlet>
    <page-router-outlet
        *tabItem="{title: 'Courses', iconSource: getIconSource('search')}"
        name="coursesTab">
    </page-router-outlet>
</TabView>

Любая моя маршрутизация в app-routing.module.ts такая: 

const routes: Routes = [
    {
        path: "",
        redirectTo: "/(homeTab:home/default//gameTab:game/default//coursesTab:courses/default)",
        pathMatch: "full"
    },
    {
        path: "home",
        component: NSEmptyOutletComponent,
        loadChildren: "~/app/home/home.module#HomeModule",
        outlet: "homeTab"
    },
    {
        path: "game",
        component: NSEmptyOutletComponent,
        loadChildren: "~/app/game/game.module#GameModule",
        outlet: "gameTab"
    },
    {
        path: "courses",
        component: NSEmptyOutletComponent,
        loadChildren: "~/app/courses/courses.module#CoursesModule",
        outlet: "coursesTab"
    }
];

@NgModule({
    imports: [NativeScriptRouterModule.forRoot(routes)],
    exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }

Теперь я хочу перейти от homeTab, нажав кнопку в моем home.component.html, поэтому я пробую это: 

<Button text="Add a course" (tap)="gotoCourses()" class="btn-green" width="50%"></Button>

В моем home.component.ts я пытаюсь перейти к пути /courses: 

constructor(private routerExtensions: RouterExtensions) { }

public gotoCourses(){
    this.routerExtensions.navigate(["/courses"]);
}

Я также пробовал с путями: 

courses
courses/default
//coursesTab
//coursesTab:courses
//coursesTab:courses/default
../coursesTab:courses/default
../coursesTab:courses
../coursesTab
../courses
../courses/default

Но я получаю сообщение об ошибке: 

S: ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'courses'
JS: Error: Cannot match any routes. URL Segment: 'courses'
JS:     at ApplyRedirects.noMatchError (file:///data/data/org.nativescript.SimpleStats/files/app/tns_modules/@angular/router/bundles/router.umd.js:2557:20) [angular]
JS:     at CatchSubscriber.selector (file:///data/data/org.nativescript.SimpleStats/files/app/tns_modules/@angular/router/bundles/router.umd.js:2538:33) [angular]
JS:     at CatchSubscriber.error (file:///data/data/org.nativescript.SimpleStats/files/app/tns_modules/rxjs/internal/operators/catchError.js:48:31) [angular]
JS:     at MapSubscriber.Subscriber._error (file:///data/data/org.nativescript.SimpleStats/files/app/tns_modules/rxjs/internal/Subscriber.js:93:26) [angular]
JS:     at MapSubscriber.Subscriber.error (file:///data/data/org.nativescript.SimpleStats/files/app/tns_modules/rxjs/internal/Subscriber.js:73:18) [angular]

Похоже, мое понимание навигации полностью отсутствует, поэтому, пожалуйста, помогите. Я уверен, что это легко исправить, но я не могу понять, как перейти к вкладке «Курсы», нажав мою кнопку. Навигация с помощью вкладок работает нормально.

Вот демоверсия детской площадки: https://play.nativescript.org/?template=play-ng&id=3zF1mB&v=2

1 Ответ

1 голос
/ 28 апреля 2019

Вы будете использовать метод навигации только для перехода на новую страницу. В вашем примере курс уже загружен во второй выход маршрутизатора во второй вкладке, поэтому все, что вам нужно сделать, это изменить выбранный индекс представления вкладок. 

tabView.selectedIndex = 1; // will show the course page

Обновленная игровая площадка

...