Как управлять маршрутизацией на одностраничном веб-сайте Angular 9 - PullRequest
Новая
       27

Как управлять маршрутизацией на одностраничном веб-сайте Angular 9

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

У меня есть одностраничный веб-сайт, созданный 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>```

1 Ответ

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

добавить router-outlet к app.component, как это 

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