单spa角度应用子路由不起作用

Question

我已经设置了一个单spa root-config 应用程序和其他 2 个以 angular 实现的子应用程序（使用Parcels ）。 我正在尝试从根应用程序导航到子应用程序路由，它适用于第一条路由/app1 ，但是如果我想导航到/app1/search或/app1/details它不会加载关联的组件, 虽然 url 已更改。

如果我最初点击/app1/search它会加载搜索组件，但之后如果我尝试导航到/app1/<any-route>等其他路由，它会更改 url，但不会加载组件。

根配置 app.component.html

<a routerLink="/app1" routerLinkActive="active">App1 Home</a>
<a routerLink="/app1/search" routerLinkActive="active">App1 Search</a>
<a routerLink="/app1/details" routerLinkActive="active">App1 Details</a>
<a routerLink="/app2" routerLinkActive="active">App2 Home</a>


<router-outlet></router-outlet>

App1路由模块：

const routes: Routes = [
  {
    path: 'app1',
    children: [
      {
        path: '',
        component: HomeComponent
      },
      {
        path: 'search',
        component: SearchComponent
      }, {
        path: 'details',
        component: DetailsComponent
      }]
  }, {
    path: '**',
    component: EmptyRouteComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 1

这将工作

const routes: Routes = [
  {
    path: 'app1',
    component: HomeComponent
  },
  {
    path: 'app1/search',
    component: SearchComponent
  },
  {
    path: 'app1/details',
    component: DetailsComponent
  },
  {
    path: '**',
    component: EmptyRouteComponent
  }
];

如果你想创建一个孩子然后添加

主页.component.html

<a routerLink="/search" routerLinkActive="active">App1 Search</a>
<a routerLink="/details" routerLinkActive="active">App1 Details</a>
<router-outlet></router-outlet>

然后使用如下所示的路由器。

const routes: Routes = [
  {
    path: 'app1',
    component: HomeComponent
    children: [
      {
        path: 'search',
        component: SearchComponent
      }, {
        path: 'details',
        component: DetailsComponent
      }]
  }, {
    path: '**',
    component: EmptyRouteComponent
  }
];```

Answer 2

我不知道你是否能够解决你的问题，但这可以帮助你。 正如这个链接提到的配置路由，它的重要设置APP_BASE_HREF

所以在你的情况下这会起作用

providers: [{ provide: APP_BASE_HREF, useValue: '/app1' }]在app-routing.module.ts

如果您使用/设置APP_BASE_URL ，则必须在所有链接和路由中添加/app1前缀。