單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前綴。