我在app.component.html
中有一个单独的“页面”,各组件之间彼此相邻(注意:如果重要的话,我在侧面导航中使用角形材料):
<mat-sidenav-container>
<mat-sidenav #sidenav role="navigation">
<app-sidenav (closeSidenav)="sidenav.close()"></app-sidenav>
</mat-sidenav>
<mat-sidenav-content>
<app-toolbar (sidenavToggle)="sidenav.toggle()"></app-toolbar>
<main>
<app-home></app-home>
<app-about></app-about>
<app-experience></app-experience>
</main>
</mat-sidenav-content>
</mat-sidenav-container>
我想做的是,如果用户输入“ mysite.com/about”,它将直接进入页面的app-about
部分,而无需重新加载,并对其他组件执行相同的操作。另外,如果用户单击sidenav中的锚点,则它应跳转/滚动到该app-about
部分。
如果这些页面在不同的页面上,则很容易,只需使用router-outlet
并设置以下路线即可:
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutMeComponent },
{ path: 'experience', component: ExperienceComponent },
];
并在sidenav中进行设置,例如:
<a routerLink="/about">ABOUT</a>
但是对于我一生来说,当它们都在同一页面上时,我无法使其正常工作。我不希望用户像通常需要使用href
那样在该部分之前键入“#”。