路由器插座和我的路由模块的角度问题

Question

我有一个导航栏和我的 app.component.html :

<div id="navigation">
  <ul>
      <li class="active"><a routerLink="accueil">Accueil</a></li>
      <li><a routerLink="apropos" >A propos de nous</a> </li>
      <li class="has-sub" ><a routerLink="" >Payer</a>
          <ul>
              <li><a routerLink="payer/nat" >Vol national</a></li>
              <li><a routerLink="payer/int" >Vol international</a></li>
          </ul>
      </li>
      <li><a routerLink="temoin" >Temoignages</a>
     <li><a routerLink="contact">Contact</a> </li>
  </ul>
</div>
<router-outlet></router-outlet>

我还有我的应用路由文件：

const routes: Routes = [
  { path: 'accueil', component: WelcomeComponent,
  children: [
    { path: '', component: WelcomeComponent },
    { path: 'apropos', component:  IdentiteComponent },
    { path: 'payer', component: VoyagenatComponent },
    { path: 'payer/nat', component: VoyagenatComponent },
    { path: 'payer/int', component: VoyageinternatComponent },
    { path: 'contact', component: ContactComponent },
    { path: 'temoin', component: TemoinComponent },
  ]
},
{ path: '',
  redirectTo: '/accueil',
  pathMatch: 'full'
},
{ path: '**', component: PagenotfoundComponent }
];

我想要这种行为

1. 默认情况下，我转到 WelcomeComponent ===> http://localhost:4200
2. 点击“Accueil”，进入WelcomeComponent ===> http://localhost:4200/accueil
3. 点击“A propos de nous”，我去IdentiteComponent ===> http://localhost:4200/apropos
4. 点击“Payer”，进入VoyagenatComponent ===> http://localhost:4200/payer
5. 点击“Vol national”，我去VoyagenatComponent ===> http://localhost:4200/payer/nat
6. 点击“Vol international”，我去VoyageinternatComponent ===> http://localhost:4200/payer/int
7. 点击“Temoignages”，进入TemoinComponent ===> http://localhost:4200/temoin
8. 点击“联系方式”，进入PagenotfoundComponent ===> http://localhost:4200/toto

但是当我点击“Accueil”或“Payer”或任何其他链接时，我将重定向到 http://localhost:4200/accueil

我该如何解决这个问题？我如何使用子路径示例：VoyageinternatComponent ===> http://localhost:4200/payer/int