管理角度元素Web组件中的路由？

Question

假设我有3个应用程序。

1. Shell应用程序
2. 产品应用
3. 订购应用

产品应用在ProductAppComponent中有一个路由器，可以路由到

1. 产品列表：localhost/products
2. 产品详细信息：localhost/products/1

ProductAppComponent也使用角度元素显示为网络组件。

Shell应用程序具有可以路由到的路由器

1. 产品列表：localhost/products
2. 产品详细信息：localhost/products/1
3. 订单：localhost/orders

Shell路线定义为

const routes: Routes = [
  {
    path: "",
    redirectTo: "product",
    pathMatch: "full"
  },
  {
    path: "product/*",
    component: ProductComponent
  },
  {
    path: "order",
    component: OrderComponent
  }
];

ProductComponent和OrderComponent只是Web组件上的角度组件包装器。

ProductComponent的示例

@Component({
    template: `<product-app></product-app>`
})
export class ProductComponent {}

现在，假设用户导航到localhost/product，shell的<router-outlet>渲染<product-app></product-app>，而外壳渲染<router-outlet>并拥有自己的product list并导航到localhost/products正确。

现在，外部路由器位于localhost/products，内部路由器也位于product list

现在，假设用户通过product detail导航到localhost/products/14，即内部导航。应用程序的网址更改为localhost/products

但是，外部路由器仍位于localhost/products/14，而内部路由器已更新为product list。这会导致冲突。无论用户尝试使用shell导航到cordova plugin add ionic-plugin-deeplinks --variable URL_SCHEME=myapp --variable DEEPLINK_SCHEME=https --variable DEEPLINK_HOST=example.com --variable ANDROID_PATH_PREFIX=/ 多少次，都不会发生，因为外部路由器处于相同状态。

将感谢您为解决此问题而进行的讨论。