Управление маршрутизацией в угловых элементах веб-компонента? - PullRequest
Новая
       13

Управление маршрутизацией в угловых элементах веб-компонента?

0 голосов
/ 12 апреля 2019

Предположим, у меня есть 3 приложения.

  1. Оболочка приложения
  2. Приложение к продукту
  3. Заказать приложение

Приложение продукта имеет маршрутизатор в ProductAppComponent, который может маршрутизировать до

  1. Список продуктов: localhost/products
  2. Деталь продукта: localhost/products/1

ProductAppComponent также отображается как веб-компоненты с использованием угловых элементов .

В приложении Shell есть маршрутизатор, который может маршрутизировать на

  1. Список продуктов: localhost/products
  2. Деталь продукта: localhost/products/1
  3. Заказы: localhost/orders

Маршрут оболочки определяется как 

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

ProductComponent и OrderComponent - это просто угловые обертки над веб-компонентами.

Пример для ProductComponent

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

Теперь, скажем, пользователь перешел к localhost/product, оболочка <router-outlet> отображает <product-app></product-app>, что, в свою очередь, отображает его <router-outlet> и правильно перемещается к product list.

Теперь внешний маршрутизатор находится на localhost/products, а внутренний маршрутизатор также на localhost/products

Теперь предположим, что пользователь прошел через product list до product detail, т.е. внутреннюю навигацию. URL-адрес приложения изменится на localhost/products/14

Но внешний маршрутизатор по-прежнему находится на localhost/products, а внутренний маршрутизатор обновился до localhost/products/14. Это вызывает конфликт. Независимо от того, сколько раз пользователь пытается перейти к product list с помощью оболочки, это не произойдет, поскольку внешний маршрутизатор находится в том же состоянии.

Буду признателен за обсуждение этой проблемы.

...