angular 如何让子路由在嵌套路由中占据整页

Question

我有一个名为 PRODUCTS 的父路由，在这条路由中我有一个名为 CREATE-PRODUCT 的子路由。当用户单击 CREATE-PRODUCT 按钮时，它意味着导航到创建产品路线，但我仍然看到显示的父路线内容，而不是使 CREATE-PRODUCT 路径完整并单独包含该内容。我错过了什么？我有图片解释我是如何去做的。我知道我在某个地方错了。请帮忙。

当单击按钮而不是采用完整路径时，创建产品路线显示在左侧

我的路线图

然后我将其放置在父（产品）组件中

我打算确保侧边菜单显示活动状态。以下是我如何在我的 SIDEMENU 中为每条活动路线添加活动状态。

Answer 1

由于 create-product 路由是 products 路由的子路由，并且 ProductComponent 中有一个路由器出口，因此 CreateProduct 组件将位于此处呈现（这就是为什么我们在屏幕截图中的 ProductComponent 顶部看到它）。

更新您的路线架构以保持产品路线的活动状态：

{path: 'vendors', component: VendorsComponent, children: [
    {path: 'products', children: [
      {path: '', component: ProductsComponent},
      {path: 'create-product', component: CreateProductComponent},
    ]}
  ]}

angular 如何让子路由在嵌套路由中占据整页

How to make child route take full page in a nested route in angular

angular

angular-ui-router