如何在单页网站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，如下所示

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