给定以下模块,如何创建路由,以便在应用程序加载此模块时,它将路由到CComponent
并在指定的路由器出口AComponent
中加载search-results
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AComponent } from './a.component';
import { BComponent } from './b.component';
import { CComponent } from './c.component';
@NgModule({
declarations: [
AComponent,
BComponent,
CComponent
],
imports: [
BrowserModule,
RouterModule.forRoot([
{
path: '',
pathMatch: 'prefix',
component: CComponent,
children: [
{
path: 'a',
component: AComponent,
outlet: 'search-results'
},
{
path: 'b',
component: BComponent,
outlet: 'search-results'
}
]
])
],
providers: [],
bootstrap: [CComponent]
})
export class AppModule {}
a.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'a-component',
template: `
<div class="tabs row">
<h3 [routerLink]="[{ outlets: { 'search-results': ['a'] } }]" class="tab" routerLinkActive="active">
A
</h3>
<h3 [routerLink]="[{ outlets: { 'search-results': ['b'] } }]" class="tab" routerLinkActive="active">
B
</h3>
</div>
<router-outlet name="search-results"></router-outlet>
`
})
export class AComponent {
}
我尝试了很多不同的路线:
使用上述配置,页面加载,但AComponent
未加载到屏幕上。
如果我更新CComponent
以获得以下内容:
export class CComponent {
constructor(
private route: ActivatedRoute,
private router: Router
) {
router.navigate(
[
{
outlets: {
'search-results': ['a']
}
}
], { relativeTo: route });
}
}
然后一切似乎都有效,但是必须在父元素的构造函数中触发导航似乎是错误的。
如果我更新子路由并将{ path: 'a', component: AComponent, outlet: 'search-results' }
替换为{ path: '', component: AComponent, outlet: 'search-results' }
,则路由器似乎在插座中正确加载该组件,但routerLinkActive
指令似乎不是生效,因为active
类未添加到第一个h3,将routerLink
更新为outlets: { 'search-results': ['a'] }
并不允许导航回AComponent
之后导航到BComponent
。
我已经尝试过多种变体,但都没有成功。
是否有办法配置路由,以便默认路由将在命名为CComponent
路由器的主要未命名router-outlet
和AComponent
中加载search-results
-outlet吗
答案 0 :(得分:1)
目前,您正在定义到您的基本路线的子路线,其中一条是/a
(将AComponent
加载到search-results
插座的路径),但您实际上并不是这样在应用程序加载时转到该路径。当您在navigate
(在加载时进行初始化)中强制CComponent
到该路线时,它会起作用。
如果您希望应用程序最初在(search-results):a
路由处于活动状态时加载,则可以在路由定义中使用redirectTo
property。
在你的情况下,我会在初始路线上模式匹配(空路径:''
)并重定向到加载/a
的路径,如下所示:
RouterModule.forRoot([
/* this line will match the initially loaded route and
immediately redirect to the child route 'a', which loads
`AComponent` into the `search-results` outlet */
{ path: '', pathMatch: 'full', redirectTo: '(search-results:a)'},
{
path: '',
pathMatch: 'prefix',
component: CComponent,
children: [
{
path: 'a',
component: AComponent,
outlet: 'search-results'
},
{
path: 'b',
component: BComponent,
outlet: 'search-results'
}
]
}
])
请注意,订单在上面的代码段中很重要。它将匹配空路径,重定向到子路径,以及在指定插座中加载所需组件(如您在代码中定义的那样)。