ไทป์สคริปต์ - การกำหนดเส้นทางลูกใน Angular 17

ฉันกำลังพยายามใช้การกำหนดเส้นทางย่อยของเด็กและฉันเข้าใจผิดบางอย่าง

ความแตกต่างระหว่าง

{path:'products',component:ProductsComponent,children:[{path:'details/:id',component:ProductDetailsComponent}]}

และ

{path:'products',component:ProductsComponent},

{path:'products',children:[{path:'details/:id',component:ProductDetailsComponent}]},

เพราะอันแรก URL ถูกเปลี่ยนแต่ไม่ได้ไปที่ ProductDetailsComponent ในขณะที่อันที่สองทำงานได้ดี URL ถูกเปลี่ยนและมันไปที่ ProductDetailsComponent

ฉันกำลังพยายามใช้การกำหนดเส้นทางแบบลูกใน Angular 17

คำตอบ #1

เท่าที่ฉันรู้ ตัวที่สองสามารถเขียนได้เพียงว่า

{path:'products',component:ProductsComponent},

{path:'products/details/:id',component:ProductDetailsComponent},

นั่นคือสิ่งที่การตั้งค่านั้นหมายความว่าโดยพื้นฐาน

เกี่ยวกับเหตุผลที่อันแรกไม่ทำงาน คุณจำเป็นต้องตรวจสอบสิ่งต่อไปนี้

• ProductsComponent ต้องมี router-outlet อยู่ภายใน HTML ถึงจะโหลดรายละเอียดสินค้าภายในนั้นได้ โดยพื้นฐานแล้ว หากมีลูก พวกเขาจะถูกเรนเดอร์ใน component ที่คุณกำหนดสำหรับ path นั้น (ProductsComponent) ใช้วิธีนี้ หากคุณต้องการเรนเดอร์เนื้อหาของรายละเอียดสินค้าภายใน component ของสินค้า มิฉะนั้นให้ใช้การ routing ด้านล่าง

• สำหรับวิธีการกำหนดเส้นทางอีกวิธีหนึ่ง กรุณาลองวิธีนี้

การกำหนดเส้นทาง

 { 
      path:'products',
      children:[
          {path: '', component: ProductsComponent},
          {path: 'details/:id', component: ProductDetailsComponent},
      ],
 },

ที่นี่ products เป็นเส้นทางฐาน เมื่อมันเป็นแค่ products แล้ว ProductsComponent จะถูกแสดงผล หากมันเป็น details/:id แล้ว ProductDetailsComponent จะถูกแสดงผล ฉันแนะนำแบบนี้เพราะว่ามันอ่านง่ายกว่า!

คำตอบ #2

 {
    path:'routing',
    component:RoutinggComponent,
    children:[
      {
        path:'two',
        component:TwoWayBindingComponent
      },{
        path:'toggel',
        component:ToggelComponent
      }
    ]
  }