将链接路由到页面的指定部分

时间:2020-04-19 16:04:18

标签: html angular hyperlink routing anchor

我在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那样在该部分之前键入“#”。

0 个答案:

没有答案