I have the following configuration for my Angular2 routes...
RouterModule.forRoot([
{
path: '',
// redirectTo: '/admin',
component: LoginComponent,
pathMatch: 'full'
},
{
path: "admin",
component: ContentComponent,
children: [
{
path:"admin",
component: HeaderComponent,
outlet: 'header'
},
{
path:"admin",
component: LeftNavComponent,
outlet: 'header'
},
{
path:"admin",
component: AdminComponent,
outlet: 'body'
}
]
}
])
This works good but I don't really need a path for the children and the navigation (["/admin", {outlets: {"header":["admin"], "body":["admin"], "leftNav":["admin"]}}];) and the url (#/admin/(header:admin//body:admin//leftNav:admin)) are really long. Since I can infer the children is there a way I can leave them out?
When I upgraded from #angular/router v3.1.2 to v3.2.0 it started working as I would expect.
Related
in routing I have next:
{path: 'modules', component: ..., resolve: { modules: ModulesServiceResolver},
{path: 'modules/:id', component: ...}
and when I return back from child component - resolve not called one more time?
array of modules, which I get from modules resolver can be changed when I am in inner page. I want to get them?
how to call resolver one more time when return from child route?
UPD:
modules I have done as separate module
then in modules.routing done next
{
path: '',
component: ModulesComponent,
resolve: {
projects: ModulesService
},
runGuardsAndResolvers: 'always'
},
{
path: ':id',
loadChildren: () => import('./module/module.module').then(m => m.ModuleModule)
}
now works as needed
modules I have done as separate module then in modules.routing done next {
path: '',
component: ModulesComponent,
resolve: {
projects: ModulesService
},
runGuardsAndResolvers: 'always'
},
{
path: ':id',
loadChildren: () => import('./module/module.module').then(m => m.ModuleModule)
}
This may seems as a silly question but I can't understand this routing
routes.ts:
const APP_ROUTES: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'articles', component: ArticulosComponent },
{ path: 'article/:id', component: ArticuloComponent },
{ path: '', pathMatch: 'full', redirectTo: 'home' },
{ path: '**', pathMatch: 'full', redirectTo: 'notfound' }
];
When access to localhost:4200/article/6 the router redirects to localhost:4200/#/home but when manually wrote localhost:4200/#/article/6 works fine.
First, note # symbol, why is it there and what different does it cause? And... I specify 'manually' because even through code adding the # symbol to the path (ex. ) keeps redirecting to home
The main question/problem is "Which would be the correct link or rule in other to load the correct component?"
You can remove # from route changing value of useHash in app.module.ts
RouterModule.forRoot(ROUTES, { useHash: false }),
You can add pathMatch: 'full' with home and articles routes
So, I have a layout like this:
<div class="page-container">
<app-header></app-header>
<div class="container">
<div class="row row-offcanvas row-offcanvas-left">
<app-side-nav></app-side-nav>
<app-broadcast-show></app-broadcast-show>
<router-outlet></router-outlet>
</div>
</div>
</div>
And all components are working well with this, except for one. This is my Router array:
const appRoutes: Routes = [
{path: 'login', component: LoginComponent},
{path: 'register', component: RegisterComponent},
{
path: 'admin', component: MainComponent, children: [
{
path: 'dashboard',
component: DashboardComponent
},
{
path: 'fund_transfers/deposits',
component: FundTransfersComponent,
children: [
{
path: 'edit',
component: DepositComponent
},
],
},
{
path: 'fund_transfers/withdrawals',
component: FundTransfersComponent,
},
{
path: 'profile',
component: ProfileComponent
},
{
path: 'broadcast',
component: BroadcastCreateComponent
}
]
},
];
Route
children: [
{
path: 'edit',
component: DepositComponent
},
],
Doesn't show when I click on a button that is leading there. I registered Component, created it like I created the rest of the components that are working, but it is not triggering constructor nor onInit, nor is it hiding the previous view and showing the deposit/edit.
Anybody has any solution to this?
Found out whats going on. If using route as child, then in the parent html I need to set router-outlet, not in the first in line, in my case, admin, but rather in fund_transfers/deposits.
My router code is as below. When I am trying to access intro page in DashboardComponent,
it loads intro component but comes back to dashboard, what am I doing wrong?
{ path: '', component: HomeComponent, //home component
children: [
{ path: 'dashboard', component: DashboardComponent } // first child
{ path: 'main', component: ClientComponent, //2nd child
children: [
{ path:'intro', component:ClientsComponent, outlet:intro',
children: [ // grand children
{ path: '', redirectTo: 'list', pathMatch: 'full' },
{ path: 'list', component: ListComponent},
]
},
]}
}
I tried with both navigate and navigateByUrl, none seems to work:
router.navigate(['../main', {outlets: {'intro': ['intro']}}], {relativeTo: this.activatedRoute})
OR
router.navigateByUrl('main/(intro:intro/list)');
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?
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.