路由到 router-outlet 内的组件

Question

我有一个包含多条路线的应用程序，其中一条带有 children。我的问题是我必须以某种方式 "overwrite" <router-outlet> 从它显示的组件之一中显示的内容。

我的 route-tree 看起来有点像这样：

{
    path: 'path1',
    component: 'Comp1'
  },
  {
    path: 'path2',
    component: 'Comp2'
  },
  {
    path: 'products',
    component: ProductsComponent,
    children: [
      {path: 'product-container',
        component: EditComponent
      }
    ]
  }

我的 app.component.html 设置如下：

<div class="nav">
  <a [routerLink]="['path1']">Path 1</a>
  <a [routerLink]="['path2']">Path 2</a>
  <a [routerLink]="['products']">Products</a>
</div>
<router-outlet></router-outlet>

现在在 ProductsComponent 中，我有一个按钮需要 link 到 EditComponent，一个用于编辑产品或添加新产品的页面。所以我在里面做了一个这样的按钮：

<a [routerLink]="['product-container']">Add</a>

它 link 的路径是 products/product-container，这对我来说似乎是正确的。尽管单击它，但导航本身起作用（url 在浏览器中发生变化），显示的内容永远不会改变。显然，在我的产品页面中添加另一个 <router-outlet> 将显示其中的 EditComponent。

现在的问题是：有没有办法让"overwrite"在app.component.html中的<router-outlet>在我按下"Add"时显示EditComponent而不是ProductComponent ProductComponent 中的按钮？

或者我是否必须让“添加”按钮在两个 page-parts 之间切换并使用它们自己的 ngIf 或类似的东西？

编辑：我想到的另一个选择是将 ProductComponent 和 EditComponent 放在它们自己的 RoutingModule 中并处于同一级别，然后为两者创建一个 "parent" 组件并让它们在 [=46= 中共享一个 <router-outlet> ] 成分。虽然我更愿意在实施类似的东西之前先看看是否还有其他选择。

Answer 1

最后，我遵循了我在 "Edit" 下 post 编辑的想法。

我创建了一个 ProductsModule 和一个 ProductsRoutingModule。 ProductsRoutingModule 现在有一个（也是新创建的）ProductsContainerComponent，其中 HTML 仅包含 <router-outlet> 并且在 routeTree 中同时具有 ProductsComponent 和 EditComponent 作为子组件。

ProductsModule 当然已经在 AppModule 中公开了。

在 EditComponent（和 ProductsComponent 分别）中我有：

constructor (private router: Router) {
}

// triggered on button-click
navigate() { 
  this.router.navigate['products'];
}

而且效果很好。尽管我的 IDE 告诉我我没有 handle/react 兑现这个 returns 的承诺，所以这仍然是我必须处理的事情。否则，这个解决方案对我有用。

希望这对偶然发现此问题且遇到相同问题的任何人有所帮助 post。

路由到 router-outlet 内的组件

routing to a component within router-outlet

angular

routing

navigation

router-outlet