angular中的路由器出口和我的路由模块问题

我有一个导航栏和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>

我想要这种行为

默认情况下，我转到WelcomeComponent==>http://localhost:4200

点击“Accueil”，我进入WelcomeComponent==>http://localhost:4200/accueil

单击“建议”，我进入IdentiteComponent=>http://localhost:4200/apropos

点击“付款人”，我进入VoyagenatComponent=>http://localhost:4200/payer

点击“Vol national”，我进入VoyagenatComponent=>http://localhost:4200/payer/nat

点击“Vol国际”，我进入VoyageinternatComponent==>http://localhost:4200/payer/int

点击“Temoignages”，我进入TemoinComponent=>http://localhost:4200/temoin

点击“联系人”，我进入PagenotfoundComponent==>http://localhost:4200/toto

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

---

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

如果你这样改变路线会发生什么<代码>

一份提案

。这是一条子路径，所以你必须称之为完整路径。

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 }
];