Angular 路由器前缀

Question

我有一堆组件使用带有绝对路径的路由器来进行某些操作。

假设我有 EntityComponent 通过一些导航到 /otherEntity/* urls

的操作

效果不错。

现在我添加了另一个顶级组件并使用以下配置路由器 url： localhost/PREFIX/ 以该组件为目标，我还添加了现有路线作为孩子。

我可以通过 localhost/prefix/entities 访问现有组件，但该组件的导航已损坏。当我执行操作时，我导航到 /otherEntity/ 而不是 /prefix/otherEntity

有什么办法可以解决吗？我尽可能为某些组件使用相对路径，但在某些情况下我不能那样做。

主要路线：

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

申请等级路线：

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

导航示例：

export class EntityComponent {

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

Answer 1

我的意思是这样的

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`);
   }

}

Angular 路由器前缀

Angular router prefix

angular

typescript

frontend

angular2-routing