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

Question

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

这是routing.module：

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.html

<app-headder-video [contact]="contact"></app-headder-video>
<app-about></app-about>
<app-services></app-services>
<app-work></app-work>
<app-footer [contact]="contact"></app-footer>```

Answer 1

像这样将router-outlet添加到app.component中