CODEWITHSUNDEEP
angular2-routingangular2-nativescript
DauvO
DauvO

Reputation: 71

How do I implement the <router-outlet> directive in Nativescript to show child routes?

I have been working with Nativescript with Angular 2 and Typescript and understand there are two options for the router outlet. The original angular <router-outlet> directive which can be used to show children routes of a component, and the <page-router-outlet> which is specific to nativescript routing. I have been using the latter and attempting to use the <router-outlet> directive but find that it acts the same. I want for example this scenario.

parent.component.html

<StackLayout>
<Button [nsRouterLink]="['/accounts/edit-account']"><Button>
<Button [nsRouterLink]="['/accounts/new-account']"><Button>
</StackLayout>
<router-outlet></router-outlet>

This has two buttons with nativescript nsRouterlink directive. I want the buttons to remain while the router-outlet updates with the child information. here are the routes.

module.routing.ts

const Routes: Routes = [
  { path: "accounts", children: [
    {path: "", component: ParentComponent },
    { path: "new-account", component: ChildOneComponent}, 
    { path: "edit-account", component: ChildTwoomponent},
  ]  
},

];

The problem is when I attempt this it replaces the entire screen without leaving the buttons in place as would do the <page-router-outlet> directive.

I've even followed this documentation by Nativescript and the example does not act as the documentation declares.

Can anyone steer me in the right direction?

Upvotes: 2

Views: 1204

Answers (1)

DauvO
DauvO

Reputation: 71

Following the Nativescript Documentation again works ok. The solution in general is in the routing to change from 

const Routes: Routes = [
  { path: "accounts", children: [
    {path: "", component: ParentComponent },
    { path: "new-account", component: ChildOneComponent}, 
    { path: "edit-account", component: ChildTwoomponent},
  ]  
},

];

to

const Routes: Routes = [
  { path: "accounts", component: ParentComponent, children: [
    {path: "", redirectTo: "/accounts/new-account", pathMatch: 'full' },
    { path: "new-account", component: ChildOneComponent}, 
    { path: "edit-account", component: ChildTwoomponent},
  ]  
},

];

Finding this I have a new issue that I will post in a different question and link to this answer later.

Upvotes: 1

Related Questions