Маршрутизация ссылки на указанный раздел страницы - PullRequest
Новая
       50

Маршрутизация ссылки на указанный раздел страницы

0 голосов
/ 19 апреля 2020

У меня есть одна «страница» с компонентами ниже друг друга, как в моем app.component.html (примечание: я использую angular материал для боковой навигации, если это имеет значение): 

<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», он будет go перемещаться в раздел 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.

...