Динамический путь на основе результата обслуживания

Question

Я использую Angular 8 для создания темы WordPress.

Я хочу разрешить пользователю выбирать пользовательскую структуру постоянных ссылок на панели инструментов WP.

Примечание Это не вопрос WP. Я просто упоминаю WP для тех, кто знаком с ним, чтобы иметь возможность лучше понять вопрос. Для тех, кто не знаком с ней, структура постоянных ссылок - это, по сути, набор правил для отображения содержимого WP с понятными URL.

Если пользователь может выбрать собственную структуру постоянных ссылок, я должен настроить динамическую маршрутизацию. дизайн для углового приложения, чтобы он работал соответственно.

Итак, сервис (действительно ли это должен быть сервис?), который может называться customRoutesSvc , подключится к базе данных и получит конфигурацию, что будет выглядеть следующим образом:

{
 "posts_permalink":"\/%postname%\/",
 "tag_base":"tag",
 "category_base":"category"
}

Предположим, что customRoutesSvc теперь имеет эти значения в качестве свойств.

Итак, мне нужно как-то подать мой модуль маршрутизации,рассмотреть эту информацию.

Мой модуль маршрутизации использует отложенную загрузку и выглядит следующим образом с фиксированными путями маршрутизации.

{
  path: 'category/:category',
  loadChildren: () => import('./view-category/view-category.module').then(m => m.ViewCategoryModule)
},
{
  path: 'tag/:tag',
  loadChildren: () => import('./view-tag/view-tag.module').then(m => m.ViewTagModule)
},
{
  path: 'post/:slug',
  loadChildren: () => import('./view-post/view-post.module').then(m => m.ViewPostModule)
}

Я думал о чем-то вроде:

{
  path: customRoutesSvc.category_base + 'category/:category',
  loadChildren: () => import('./view-category/view-category.module').then(m => m.ViewCategoryModule)
},
{
  path: customRoutesSvc.tag_base + '/:tag',
  loadChildren: () => import('./view-tag/view-tag.module').then(m => m.ViewTagModule)
},
{
  path: '**',
  loadChildren: () => import('./view-post/view-post.module').then(m => m.ViewPostModule)
}

Отмечая, что последний маршрут будет поглощать все, а затем модуль просмотра сообщений обработает все остальное и отобразит сообщение или перенаправит на страницу с ошибкой.

Почему у меня проблемы с этим?

Насколько я понимаю, Angular загружает угловые модули перед обслуживанием. Не из-за каких-либо предпочтений, а потому, что сервис - это модуль ES2015, который встраивается в угловой модуль. Это означает: Angular нужны свои Angular модули, чтобы знать, какие модули ES2015 (компоненты, сервисы, каналы, ...) загрузить. Итак, модуль угловой маршрутизации загружается до службы, и, следовательно, служба не может общаться с самим модулем.

Что я пробовал до сих пор?

Я пыталсядумать и получать ответ.

Пожалуйста, не интерпретируйте, я здесь, чтобы попросить код. Это скорее концептуальный вопрос, который направлен не на кодовый ответ, а на теоретический ответ, который поможет мне продолжать самостоятельно.

Что я считаю единственным возможным решением?

Так как служба не может общаться с модулем маршрутизации (это правда?), Мне нужно создать родительскую маршрутизацию с одним путем, который поглощает все (**).

Тогда мне нужноиметь DispatchComponent, который будет анализировать этот URL и сравнивать его с уже имеющейся информацией о структуре постоянных ссылок.

Наконец, мне нужен DispatchComponent, чтобы перенаправить содержимое в правильный конечный компонент, который позаботится о предоставлениирезультат.

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

Пожалуйста, не стесняйтесь спрашивать о моих целях. Спасибо.

Answer 1

Я думаю, что вы ищете динамическую маршрутизацию. Это ужасно недокументированная функция, но вы можете изменить конфигурацию маршрутизатора во время выполнения, например, внутри подписки, которая выбирает конфигурацию базы данных вашего customRoutesSvc:

  constructor(private router: Router) {
    router.resetConfig({
      // A new routes object like the one you supply in the routing module.
    });
    // It's also possible to manipulate the config object directly.
    router.config.unshift({ path: 'page1', component: Page1Component });
  }

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

Маршрутизация модулей маршрутов:

const routes: Routes = [
  { path: '**', component: DummyComponent, resolve: {routing: RoutingResolve}}
];

распознаватель маршрутов:

import { Injectable } from '@angular/core';
import { Router, ActivatedRouteSnapshot, RouterStateSnapshot, Resolve} from '@angular/router';

@Injectable()
export class RoutingResolve implements Resolve<any> {

  constructor(private router: Router, private routes: customRoutesSvc ) {}

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<any>|any {
    let config = this.routes.getRoutingStructure();
    this.router.resetConfig(config);
    this.router.navigate(route.url);
  }
}

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