search

greenstevester / nativescript-sidedrawer-example

Angular 2 + Nativescript SideDrawer example
7 stars 3 forks source link

Second route not loading #1

Closed manojdcoder closed 7 years ago

manojdcoder commented 7 years ago

Thanks for the sample project.

I have exact same setup in my project, I have "home/forms" (default) and "home/settings" routes. I'm able to see forms page loaded in drawer, but when I navigate to settings and forms again later only the action bar content is updated but the page content never updates, just turns to white page. Any idea why?

greenstevester commented 7 years ago

Hi there, How are you navigating to your specified routes? It sounds like in your case that the page route is not loaded correctly or routing history is not cleared. In this example, all the navigation is driven from the home component html in the drawer - e.g: [nsRouterLink]="['/home/login']" clearHistory="true". If you run this example and remove clearHistory="true", you may end up with the same behaviour as you are seeing in your case. Also important to note is the "landing page", defined in the app.module.ts as an empty Route: {path: '', component: WelcomeComponent} An empty route was needed, so when the user navigates to /home, it goes straight though to the welcome page, which actually in this case is the view container of the app - without it, the RadSideDrawerComponent does not work with the angular router (at least I nor the guys from telerik, could get a working solution) .

manojdcoder commented 7 years ago

@greenstevester I'm using Angular v4, your sample still works without clearHistory="true" and also without a empty route. Not able to figure-out why your's working and not mine :(

{ path: "home", component: HomeComponent, children: [ {path: 'welcome', component: WelcomeComponent}, {path: "login", component: LoginComponent}, {path: "help", component: HelpComponent}, {path: "**", redirectTo:"welcome"} ] }, { path: '**', redirectTo: '/home/welcome' }

greenstevester commented 7 years ago

@manojdcoder - hmmm - still works without clearHistory and empty route .... have you tried downgrading yours from Angular4 -> Angular2? You may not want to, but I tried porting another NS project to Angular4 lastweek and the first thing that broke was the routing, so moved back to Angular2 for the moment,

manojdcoder commented 7 years ago

@greenstevester No, still I couldn't get it working. If you find some time, can you please take a quick look at the attached project and get it working? Just integrated Drawer in the hello world project generated by nativescript-cli.

myapp.zip

greenstevester commented 7 years ago

@manojdcoder - I took a quick look at your code - it looks like the (tap)="drawer.sideDrawer.closeDrawer() event somehow blocks the link that you specified in your stack layout. My HomeComponent takes care of closing the sidedrawer via subscribing to a sideDrawer service and this works but agree its overkill for such basic functionality - which I already told the telerik guys. I updated my project to use the latest angular libs, so it's there if you want to use it.

manojdcoder commented 7 years ago

@greenstevester Thanks a lot for your support. I didn't realize that event could possibly block the route. Thanks again!

manojdcoder commented 7 years ago

@greenstevester I tried removing the tap event from the stack layout now, but still not able to get it working. If possible, could you please share your version to understand what all you have fixed...

manojdcoder commented 7 years ago

@greenstevester Finally I figured out my issue after 2 days, the StackLayout put inside drawer content was not occupying 100% height by default, and I din't have any content just waiting to see the background color I assigned. Finally putting a label inside made my eyes open and understood everything was actually working already 😂

Nothing was issue, it supports non-empty routes or tap events with nsRouterLink, just everything.