单水疗角度应用子路由不起作用

Question

我已经设置了一个单spa根配置应用程序和其他两个在angular中实现的子应用程序(使用包裹)。我试图从根应用程序导航到子应用程序路由，它适用于第一个路由/app1，但如果我想导航到/app1/search或/app1/details，它不加载相关的组件，虽然url改变了。

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

root-config 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
}
];

如果你想创建一个子元素，然后添加

home.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

是很重要的那么在你的例子中，这就可以了

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

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