angular - router-outlet 内のコンポーネントへのルーティング

Question

いくつかのルートを持つアプリがあり、そのうちの 1 つに子供がいます。私の問題は、<router-outlet>表示されるコンポーネントの1つから表示されるものを何らかの形で「上書き」する必要があることです。

私のルートツリーは次のようになります。

{
    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 の [追加] ボタンを押したときに、app.component.html を「上書き」して<router-outlet>、ProductComponent の代わりに EditComponent を表示する方法はありますか?

または、別の方法として、[追加] ボタンで、独自の ngIf などを使用して 2 つのページ パーツを切り替える必要がありますか?

---

編集:私が考えた別のオプションは、ProductComponent と EditComponent の両方を独自の RoutingModule と同じレベルに配置し、両方の「親」コンポーネントを作成し、その親コン​​ポーネント<router-outlet>内で 1 つを共有することです。そのようなものを実装する前に、最初に他のオプションがあるかどうかを確認したいと思いますが。