Picking these one-by-one didn’t work out very well and we took a more holistic approach to figure out what was wrong. The issues ranged from bugs and difficulties in use to unsupported scenarios and limitations. Given the component’s importance to the overall app navigation we wanted to fix this. Some time ago we identified the TabView as one of our most problematic components in terms of reported issues. Now, with version 6.1 they are finally out of beta. They are dubbed BottomNavigation and Tabs and are meant to be new and better alternatives to the existing TabView component.
#Nativescript tabview with routing update#
Just simply provide all outlets you want to update in the outlet param.In NativeScript 6 we introduced two new tab navigation components to the core modules suite. You can also navigate to more than one outlet in a single call. Then in DogsDetailsComponent template we just need to: Here is how the routes should be configured: const routes: Routes = [ If you needed to navigate to CatDetails by default, you could set redirectTo to '/home/(catoutlet:cats/Betsy//dogoutlet:dogs)' or '/home/(catoutlet:cats/Betsy)' In our case we want to show CatsComponent and DogsComponent first, so our redirectTo should be '/home/(catoutlet:cats//dogoutlet:dogs)' This can be done by changing the redirectTo property on the default route. For example ' cat-outlet' will not work.Īdditionally we can select which components to show by default when the app loads for the first time. the outlets names don't need to include the word outlet, however the name should contain only alpha-numeric characters.
So each cat component should be assigned to ' catoutlet', while each dog component should be assigned to the ' dogoutlet'. We will need to configure the routes for cat and dog related components are configured as children of the home route.Īlso each of these children routes will need an outlet property, which will indicate which router-outlet this route belongs to. Since we know what components we will need we are going to start with configuring our routes (see ). Therefore we need to go to and change it to: Named router outlets work only with router-outlet at the root, as page-router-outlet navigates to a whole different page each time we call navigate.
Build navigation for cats using nsRouterLink, Choose the right router outlet at the root, We are going to implement our solution in the following steps: The second tab will be very similar except this time we will display a list of cats (CatsComponent) and cat details (CatDetailsComponent). One tab will display a list of dogs (DogsComponent) and when you click on one, you will be redirected to the dogs details view (DogDetailsComponent). We are going to build an app with one page (HomeComponent), which will contain a tab-view with two tabs.
#Nativescript tabview with routing how to#
I assume that you have the core knowledge of how to create Angular components, services and how to add these to plan
The idea is that you can add multiple router-outlets with to your page, give each a unique name and then navigate to each by simply providing the name of the router-outlet and the destination path.īefore we dive into the code. This is when Angular comes to the rescue with the magic of named router outlets. However the moment you add a couple of these you realise that this wasn't such a clever approach after all. You could try to hack that by adding all required components in each tab, then show and hide them with a clever *ngIf. Imagine you have a tab-view with multiple tabs and you want each tab to navigate independently of the whole page. Sometimes we need only a part the page in our app to change from one component to another, while we want the rest of the page to stay where it is.
0 kommentar(er)
