Angular 如何使子路由在视图中的嵌套路由中占据整页

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

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

我的路由映像

然后，我在父（产品）组件中放置了

我打算确保侧菜单显示活动状态。下面是我如何将活动状态添加到侧菜单中的每个活动路由。

---

由于

创建产品

路由是

产品

路由的子级，由于

产品组件

内部有一个路由器插座，因此将在此处呈现

创建产品

组件（这就是为什么我们在屏幕截图上的ProductComponent顶部看到它）

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

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

---

谢谢你抽出时间。但是，这难道不会消除产品侧菜单中显示的活动状态吗？其目标也是为侧菜单保留活动状态。让用户知道其仍在产品中。如何设置活动状态？请添加我刚才做的侧菜单模板代码。我对路由使用RouterLink活动。屏幕截图也被添加了。我更新我的答案，你需要改变你的路线架构谢谢！！！工作起来很有魅力。我对管理员的整个布局有相同的架构，但从来没有想过用这种方式来构造子路由。非常感谢你。