Angular префикс роутера - PullRequest
Новая
       4

Angular префикс роутера

0 голосов
/ 17 марта 2020

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

Давайте посмотрим, у меня есть EntityComponent с некоторым действием, которое переходит к / otherEntity / * urls

Это прекрасно работает.

На данный момент я добавил еще один компонент верхнего уровня и настроил маршрутизатор со следующим URL: localhost / PREFIX / для назначения этого компонента, а также добавил существующие маршруты в качестве дочерних.

Я могу получить доступ к существующим компонентам с помощью localhost / prefix / entity, но навигация по этим компонентам нарушена. Когда я выполняю действия, я перехожу к / otherEntity / вместо / prefix / otherEntity

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

Основные маршруты: 

const routes: Routes = [
          {
            path: '',
            component: AppComponent,
            children: [
              applicationRoutes
            ]
          },
          {
            path: 'prefix/',
            component: AppPrefixComponent,
            children: [
              applicationRoutes
            ],
          },
]

Маршруты приложений lvl: 

export const applicationRoutes: Routes = 
    [
            {
              path: 'entities',
              component: EntityComponent
            },
            {
              path: 'anotherEntity',
              component: AnotherEntityComponent,
            },
    ]

Пример навигации: 

export class EntityComponent {

   navigateToAnotherEntity() {
      this.router.navigate('/anotherEntity');
   }
}

1 Ответ

1 голос
/ 18 марта 2020

Я имею в виду что-то вроде этого 

export function applicationRoutes(prefix: string = ''): Routes {
  return  [
            {
              path: 'entities',
              component: EntityComponent,
              data: {prefix: prefix}
            },
            {
              path: 'anotherEntity',
              component: AnotherEntityComponent,
              data: {prefix: prefix}
            },
    ]
}

const routes: Routes = [
          {
            path: '',
            component: AppComponent,
            children: [
                 applicationRoutes('')
            ]
          },
          {
            path: 'prefix/',
            component: AppPrefixComponent,
            children: [
              applicationRoutes('prefix')
            ],
          },
]

и в component.ts вы можете получить данные с маршрутизатора 

export class Component implements OnInit {
prefix = ''
constrcutor(private router: Router) {
   this.prefix = this.router.snapshot.data['prefix']
}
   navigateToAnotherEntity() {
      this.router.navigate(`${this.prefix}/anotherEntity`);
   }

}
...