Issue
i have one component for sidebar , when user click on one of options load component in part of page .
but when i click on options load new component in all of page .
how can i solve this problem ?
<div>
<ul nz-menu [nzMode]="'inline'" style="width: 240px;" [nzTheme]="theme?'dark':'dark'">
<li nz-submenu nzOpen>
<span title><i class="anticon anticon-mail"></i> Letter </span>
<ul>
<li nz-menu-group>
<ul>
<li nz-menu-item><a [routerLink]="['/Inbox']">Inbox <nz-badge [nzCount]="555"></nz-badge>
</a></li>
<li nz-menu-item><a [routerLink]="['/Drafts']">Drafts</a></li>
<li nz-menu-item><a [routerLink]="['/NewLetter']">Write Letter</a></li>
<li nz-menu-item><a [routerLink]="['/ListLetter']">List Letter</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="container">
<router-outlet></router-outlet>
</div>
Route:
const routes: Routes = [
{path: 'Inbox', component: InboxComponent},
{path: 'Profile', component: ProfileComponent},
{path: 'NewLetter', component: CreateLetterComponent},
{path: 'Drafts', component: DraftsComponent},
{path: 'ListLetter', component: ListLetterComponent},
{path: '', redirectTo: 'Inbox' +
'', pathMatch: 'full'}
];
Image : I need load component in part of page
Solution
Look at the offical tutorial. I think you want to have a <nav>
tag where you specify the sidebar.
Also – is that the app.component.html you linked? Are you sure, you did not specify more <router-outlet>
s by chance?
Answered By – ForestG
Answer Checked By – Terry (AngularFixing Volunteer)