I am trying to make a router-outlet
work inside DashboardComponent
which itself is served via router-outler
present in app.component.html
.
The flow that I am trying to achieve goes like this:
After user logins, user is redirected to /dashboard
which will load DashboardComponent
.
DashboardComponent
contains mat-sidenav-container
with mat-sidenav
links and a div
container, inside which I have to serve different components - AComponent
, BComponent
, CComponent
depending on the link clicked in mat-sidenav
.
That is, path localhost:4200/dashboard/componentA
should show AComponent
in DashboardComponent
's div container and so on.
/dashboard
should redirect to /dashboard/componentA
I am having hard time trying to figure out how to show the components inside DashboardComponent
using router-outlet
.
Is this possible? Is there any better way to do this?
**app.routing.ts**
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { AComponent } from './a/a.component';
import { BComponent } from './b/b.component';
import { CComponent } from './c/c.component';
export const appRoutes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'dashboard', component: DashboardComponent, outlet: 'dashboard',
children: [
{ path: '', component: AComponent },
{ path: 'componentA', component: AComponent },
{ path: 'componentB', component: BComponent },
{ path: 'componentC', component: CComponent }
]},
// otherwise redirect to home
// { path: '**', redirectTo: '' }
];
What you have works, with a few modifications.
Firstly, you don't need to assign a name to your router-outlet inside dashboard component. Named outlets have a different use case, you can read about them here :
Here are the modifications you need to make
//dashboard.component.html
<mat-sidenav #sidenav align="start" position="start" mode="side" opened="true" class="example-sidenav side-nav-style">
<ul>
<li>
<a [routerLink]="['componentA']">componentA</a>
</li>
<li>
<a [routerLink]="['componentB']">componentB</a>
</li>
<li>
<a [routerLink]="['componentC']">componentC</a>
</li>
</ul>
</mat-sidenav>
<div class="content">
<p>dashboard works!</p>
<router-outlet></router-outlet>
</div>
//app.routing.ts
children: [
// { path: '', component: AComponent },
{ path: 'componentA', component: AComponent },
{ path: 'componentB', component: BComponent },
{ path: 'componentC', component: CComponent },
{ path: '', redirectTo: 'componentA', pathMatch: 'full'}
]},
Additionally, notice I commented the first line in the children array and replaced it with a new one at the end. Using this approach, whenever the path is empty, it will automatically redirect to componentA and change the route as well, rather than just show componentA on an empty path.
You basically have two routes pointing out to the same component.
{ path: '', component: DashboardComponent },
{ path: 'dashboard', component: DashboardComponent, }
You should use redirect to achieve your desired behavior. And in your dashboard.html - links to child components are absolute - it breaks the navigation anyway in your case - consider to use relative links. You don't need to specify a name of route outlet in this case as well - will work out of the box with proper routing setup. Once i fixed all of the above - navigation started to work.
See code samples below:
app.routing.ts
export const appRoutes: Routes = [
{ path: '', pathMatch: "full", redirectTo: 'dashboard' },
{
path: 'dashboard',
component: DashboardComponent ,
children: [
{ path: 'componentA', component: AComponent },
{ path: 'componentB', component: BComponent },
{ path: 'componentC', component: CComponent }
]},
];
dashboard.component.html
<mat-sidenav #sidenav align="start" position="start" mode="side" opened="true" class="example-sidenav side-nav-style">
<ul>
<li>
<a [routerLink]="['./componentA']">componentA</a>
</li>
<li>
<a [routerLink]="['./componentB']">componentB</a>
</li>
<li>
<a [routerLink]="['./componentC']">componentC</a>
</li>
</ul>
</mat-sidenav>
I have made some modifications to your routing file and the dashboard component file.
First you don't need to use named routes. Secondly children routes take their parents initial path so no need to provide them again and you can directly specify the child route name in router link.
you can check the working code here
hope this solves your issue.
You just need to change your routing file.
First off you need to redirect path: ''
to dashboard
:
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
And blank route of children should redirect to componentA:
{ path: '', redirectTo: 'componentA', pathMatch: 'full' },
So basically your updated routes look like:
export const appRoutes: Routes = [
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: DashboardComponent,
children: [
{ path: '', redirectTo: 'componentA', pathMatch: 'full' },
{ path: 'componentA', component: AComponent },
{ path: 'componentB', component: BComponent },
{ path: 'componentC', component: CComponent }
]},
// otherwise redirect to home
// { path: '**', redirectTo: '' }
];
I have also forked and created working demo from your demo.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.