Angular множественная маршрутизация

Question

У меня есть новый дизайн и старый дизайн для моего angular приложения. новый дизайн имеет некоторые дополнительные компоненты и функции. Я хотел бы переключить это приложение между новым и старым пользовательским интерфейсом. Я планирую добавить вспомогательный маршрут, к сожалению, он не работает. Я хочу использовать один и тот же путь для моих компонентов. У нас есть какой-нибудь альтернативный метод для достижения этой цели?

Answer 1

Вы можете иметь 2 ленивых модуля (A и B) в root вашего приложения, один для старого дизайна и один для нового дизайна, и вы можете определить маршруты внутри каждого из них.

1 - Определите ваше приложение-маршрутизацию, передав следующую конфигурацию маршрутов:

[
  {
    path: '',
    loadChildren: () => import('./a/a.module').then(m => m.AModule)
  }
];

2 - Создайте службу коммутатора, которая изменяет маршруты по требованию, установив новые маршруты следующим образом:

Служба коммутации :

class SwitchService {
  constructor(private router: Router) {}

  switchRoutes() {
    this.router.resetConfig([
      {
        path: '',
        loadChildren: () => import('./b/b.module').then(m => m.BModule)
      }
    ]);

    this.router.navigateByUrl(this.router.url);
  }
}

3 - Не забудьте добавить следующую конфигурацию { onSameUrlNavigation: 'reload' } при импорте маршрутизации приложения, чтобы перезагрузить его при переключении и оставаться на том же URL-адресе (this.router.navigateByUrl(this.router.url) в switchRoutes метод):

imports: [RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload' })]

Можно придумать более сложную службу переключения, чтобы переключать ее в любое время

Надеюсь, это поможет!