Open jdnichollsc opened 6 years ago
About the navigation, I'm navigating to the same component (CategoryListComponent)... when my service doesn't return child categories, I'm navigating to my other component (ProductListComponent) and removing the current route of the history at the same time, example: category-list.component
ngOnInit() {
this.activatedRoute.params.subscribe(params => {
let categoryId = params["categoryId"] || null
this.myAPI.getCategories(categoryId).subscribe(res => {
if(res.length){
this.categoryTitle = params["title"]
this.categories = res
}
else{
this.route.navigate(
['/catalog/product-list', {
title: this.categoryTitle,
categoryId: categoryId
}],
{ replaceUrl: true }
)
}
})
})
}
On the other hand with the router-outlet
component the navigation works well...
Hi @jdnichollsc, Could you provide sample project, which would demonstrate the behavior, which you are facing and also could be used for debugging?
@tsonevn of course, let me create a sample project, thanks for your help!
Hi @tsonevn, Sorry for the delay, you can see my sample project from the NativeScript Playground: https://play.nativescript.org/?template=play-ng&id=r4AICW&v=9
Let me know what you think, thanks for your help! 👍
@jdnichollsc I reviewed your project and saw that you had two page-route-outlet
s. One more within home.component.ts
.
After looking at the component, i realised it was indeed causing the error. I would advise you employ the use of a componentless route angular provides.
Replace this:
const routes: Routes = [
{
path: '', component: HomeComponent,
children: [
{
path: '',
component: CategoryListComponent
},
{
path: 'category-list',
component: CategoryListComponent
},
{
path: 'product-list',
component: ProductListComponent
}
]
}
];
With this.
const routes: Routes = [
{
path: '',
children: [
{
path: '',
component: CategoryListComponent
},
{
path: 'category-list',
component: CategoryListComponent
},
{
path: 'product-list',
component: ProductListComponent
}
]
}
];
Ohh yes, @jogboms you're right! But I want to use the HomeComponent as a layout for these other components :)
Also it works perfect using router-outlet
@jdnichollsc If you need both routes to share a particular template, why not have HomeComponent be a wrapper component and then use Content Projection (ng-content
)?
Or how about using the router-outlet since it fits perfectly?
Yeah, maybe the ng-content
is a temporal solution... But I don't want to use the router-outlet
component because I want to have the native transitions using the page-router-outlet
:)
Yeah. The ng-content
seems more applicable here at least until using multi frames becomes available for {N} Angular.
@jdnichollsc Did you found a solution at the end? Anyone?
Hi @dvdbrk, for my case I need to try the following solution https://github.com/NativeScript/nativescript-angular/issues/1306#event-1605251919
what are you trying to do?
Did you find a solution to your issue ? I am facing the same problem and cannot find how to prevent a component to be reactivated ...
I am also trying to find a solution for the same.
Hello guys, I'm using the
page-router-outlet
component to have beautiful transitions of my child components, but I'm getting the following error after returning in the backward navigation and my app freezes (The tap system doesn't work and the navigation stops working):This is my routing configuration:
And the template of the Home component is:
Versions:
Let me know what you think, thanks in advance!