2

我有一个包含多条路线的应用程序，其中一条有孩子。我的问题是我必须以某种方式“覆盖”<router-outlet>它显示的组件之一中的显示内容。

我的路由树看起来有点像这样：

{
    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 中，我有一个需要链接到 EditComponent 的按钮，这是一个用于编辑产品或添加新产品的页面。所以我在里面做了一个这样的按钮：

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

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

现在的问题是：当我按下 ProductComponent 中的“添加”按钮时，有没有办法“覆盖” <router-outlet>app.component.html 以显示 EditComponent 而不是 ProductComponent？

或者我是否必须让 Add 按钮在两个页面部分之间切换，它们有自己的 ngIf 或类似的东西？

编辑：我想到的另一个选择是将 ProductComponent 和 EditComponent 放在它们自己的 RoutingModule 中并在同一级别上，然后为两者创建一个“父”组件并让它们<router-outlet>在该父组件中共享一个。虽然我更喜欢在实现类似的东西之前先看看是否有其他选项。

4

1 回答 1

2

最后，我遵循了我在原始问题的“编辑”下发布的想法。

我创建了 ProductsModule 和 ProductsRou​​tingModule。ProductsRou​​tingModule 现在有一个（也是新创建的）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 告诉我，我不会处理/响应返回的承诺，但这是我仍然需要处理的事情。否则，这个解决方案对我有用。

希望这可以帮助任何遇到相同问题的人偶然发现这篇文章。

于 2017-08-07T13:33:38.187 回答