Question

我有一个有几条路线的应用程序，其中一条有孩子。我的问题是，我必须以某种方式“覆盖”Sub LoopThroughDirectory() Dim MyFile As String Dim erow Dim lRow As Long Dim lCol As Long MyFile = Dir("C:\Users\bmsand\Documents\Agatha\FY18\Test 2\") Do While Len(MyFile) > 0 If MyFile = "zmaster.xlsm" Then Exit Sub End If Workbooks.Open (MyFile) Sheets("WorkTracker").Select lRow = Cells(Rows.Count, 1).End(xlUp).Row lCol = Cells(1, Columns.Count).End(xlToLeft).Column Range(Cells(4, 23), Cells(lRow, lCol)).Copy Application.DisplayAlerts = False ActiveWorkbook.Close erow = Sheet1.Cells(Rows.Count, 1).End(xlUp).Offset(1, 0).Row ActiveSheet.Paste Destination:=Worksheets("Consolidate").Range(Cells(erow, 1), Cells(erow, 23)) MyFile = Dir Loop End Sub在其显示的一个组件中显示的内容。

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

<router-outlet>

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

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

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

<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>

它链接的路径是<a [routerLink]="['product-container']">Add</a>，这对我来说似乎是正确的。虽然单击它，但导航本身工作（浏览器中的URL更改），显示的内容永远不会更改。显然，在我的产品页面中添加另一个products/product-container将在其中显示EditComponent。

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

或者我是否可以让Add按钮在两个页面部分之间切换，使用自己的ngIf或类似的东西？

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

Answer 1

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

我创建了一个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告诉我，我没有处理/回应这个回复的承诺，所以这仍然是我需要照顾的事情。否则，这个解决方案对我有用。

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

路由到路由器插座内的组件

1 个答案: