Typescript Angular 17子路由

发布于01月27日

我试图使用子路由，我误解了一些东西.

两者有什么不同？

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

和

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

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

because the first one the url was changed but didn't go to the ProductDetailsComponenton the other h和 the 2nd one working fine the url changed 和 it goes to the ProductDetailsComponent

我试着利用子元素们在17号角的路由.

推荐答案

据我所知，第二个可以写成

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

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

这种配置的基本含义是，

至于为什么第一个不起作用，你需要判断以下几点.

ProductsComponent必须在HTML中包含router-outlet，只有这样才会在其中加载产品详细信息，基本上，如果有子组件，它们将在您为该路径配置的component中呈现(ProductsComponent)，执行此方法，如果您想在产品组件中呈现产品详细信息的内容，则执行以下路由
要获得另一种路由方法，请try 此方法.

路由

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

这里的产品是基本路径，当它只有products然后ProductsComponent就会渲染，如果它details/:id然后ProductDetailsComponent就会渲染，我建议这样做，因为它更具可读性！