Tabview with outside Login


#1

I think I am nearly there with this. I am using NS with Angular.

I have a group of tabs and a LoginComponent with form outside the TabView.

On successful login I have

ApplicationSettings.setBoolean("authenticated", true);
alert("Login success!");
this.router.navigate(["/tabs"], { clearHistory: true });

It is going to the tabbed view but each tab yields a white screen without the template content. I am not getting any path errors in the console.

Here are the routes:

export const ROUTES: Routes = [

    { path: '', redirectTo: '/login', pathMatch: 'full' },
    //{ path: "", redirectTo: "/(loginTab:login//homeTab:home//quicksnapTab:quicksnap//expenseTab:expense//reportsTab:reports//newreportTab:newreport//journeyTab:journey)", pathMatch: "full" },

    { path: "login", component: LoginComponent },

    { path: 'tabs', component: TabsComponent, children: [
        { path: "home", component: HomeComponent, outlet: "homeTab" },
        { path: "quicksnap", component: QuicksnapComponent, outlet: "quicksnapTab" },
        { path: "expense", component: ExpenseComponent, outlet: "expenseTab" },
        { path: "reports", component: ReportsComponent, outlet: "reportsTab" },
        { path: "report/:reportid", component: ReportComponent, outlet: "reportsTab" },    
        { path: "newreport", component: NewReportComponent, outlet: "newreportTab" }

    ]}    
];

In app.component.html I have

<page-router-outlet></page-router-outlet>

The TabView is standard in tabs.component.html


    <TabView androidTabsPosition="bottom" [(ngModel)]="tabSelectedIndex"  id="tabview1"  sdkExampleTitle sdkToggleNavButton>
        
            <page-router-outlet
                *tabItem="{title: 'Home', iconSource: getIconSource('home')}"
                name="homeTab">
            </page-router-outlet>
        
            <page-router-outlet
                *tabItem="{title: 'Quicksnap', iconSource: getIconSource('browse')}"
                name="quicksnapTab">
            </page-router-outlet>
        
            <page-router-outlet
                *tabItem="{title: 'Expense', iconSource: getIconSource('search')}"
                name="expenseTab">
            </page-router-outlet>
         
            <page-router-outlet
                *tabItem="{title: 'Reports', iconSource: getIconSource('search')}"
                name="reportsTab">
            </page-router-outlet>
        
            <page-router-outlet
                *tabItem="{title: 'New Report', iconSource: getIconSource('search')}"
                name="newreportTab">
            </page-router-outlet>
        
        </TabView>
        

The tab content displays perfectly when I have just the tabs in the routes and the TabView code above is in app.component.html ie.

export const ROUTES: Routes = [
    { path: "", redirectTo: "/(loginTab:login//homeTab:home//quicksnapTab:quicksnap//expenseTab:expense//reportsTab:reports//newreportTab:newreport//journeyTab:journey)", pathMatch: "full" },

    { path: "login", component: LoginComponent, outlet: "loginTab" },
    { path: "home", component: HomeComponent, outlet: "homeTab" },
    { path: "quicksnap", component: QuicksnapComponent, outlet: "quicksnapTab" },
    { path: "expense", component: ExpenseComponent, outlet: "expenseTab" },
    { path: "reports", component: ReportsComponent, outlet: "reportsTab" },
    { path: "report/:reportid", component: ReportComponent, outlet: "reportsTab" },    
    { path: "newreport", component: NewReportComponent, outlet: "newreportTab" },

];

Any ideas why the tab content is blank when I am redirected into the tabs. Have I given enough information?

Many thanks for any pointers


#2

There are several known issues when using named router outlets or router outlets inside modal window. Hopefully the next version of NativeScript Angular will resolve most.


#3

Thanks for the response manojdcoder.

Obviously we don’t want the tabs (which contain the user’s account app functionality) to be available until the user successfully logs in.

Do you know if there is a way to do this using TabView?

It seems to work fine until the tab routes are children of another route/component, then the pages are blank. Surely this must be possible?

Thanks!


#4

For time being don’t using named router outlets inside TabView, navigate on the router outlet that will hold the TabView itself.


#5

I’m sorry but I don’t understand. The TabView template comes ready made with named router outlets inside the TabView - or am I wrong?

To follow your suggestion, if I have the TabView in tabs.component.html with component tabs.component.ts, how should I navigate to a certain tab (eg. Expense) on the router outlet that holds the TabView?

I tried this but it didn’t go anywhere.

(<TabView> app.getRootView()).selectedIndex=1;

Sorry for being a bit dumb. Thanks.


#6

I meant, your root view should be a router outlet instead of a TabView and you should not use router outlets inside TabView.


#7

Hey there.

Yep we do have the root view as a router outlet.

Could you clarify your second point? “you should not use router outlets inside TabView.”

We are using the simple template with tabbed navigation template-tab-navigation-ng

This template comes ready baked with the router outlets inside TabView no? What alternative is there to make the tabs work?

Many thanks!!