Angular 如何在单页网站中管理路由9

我有一个由angular创建的单页网站，我需要在同一页的组件之间创建路由

这是路由。模块：

export const routes: Routes = [
  {
    path: '',
    component: AppComponent,
    pathMatch: 'full',
  },
  { path: 'about', component: AboutComponent },
  { path: 'services', component: ServicesComponent },
  { path: 'work', component: WorkComponent }

];

接下来是

navbar.Component

  <li class="nav-item active">
                            <a class="nav-link" [routerLink]="['/']" routerLinkActive="router-link-active">{{'home' |translate}} <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" [routerLink]="['/about']" routerLinkActive="router-link-active">{{'about' |translate}}</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" [routerLink]="['/services']" routerLinkActive="router-link-active">{{'ourServices' |translate}}</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" [routerLink]="['/work']" routerLinkActive="router-link-active">{{'ourWork' |translate}}</a>
                        </li>

像这样添加到app.component

<app-headder-video [contact]="contact"></app-headder-video>
<router-outlet></router-outlet>
<app-footer [contact]="contact"></app-footer>```

```

您是否阅读了文档？我添加了已经不工作的路由器重定向URL，但没有重定向到同一页面中其他组件的链接（SPA）。路由器出口允许我们重定向到同一页面中的另一个组件，而无需重新加载页面

<app-headder-video [contact]="contact"></app-headder-video>
<router-outlet></router-outlet>
<app-footer [contact]="contact"></app-footer>```