Angular2 назвал розетку с загруженными маршрутами
Мой основной маршрут такой:
export const routes = [
{
path: "",
component: SiteLayoutComponent,
//canActivate: [AuthGuard],
children: [
{ path: "", redirectTo: "/routeA", pathMatch: "full" },
......
......
{
path: 'routeA',
loadChildren: 'app/website/routeA/search/routeA.module#RouteAModule'
}
]
}
];
Тогда мой routeA
Модуль маршрутизации имеет вид:
const routes: Routes = [
{ path: '', component: SearchComponent,
children:[
{ path: '', pathMatch: 'full', redirectTo: 'featured'},
{ path: 'search', component: FilterResultComponent, outlet: 'searchResult' },
{ path: 'search/:listId', component: DetailsComponent, outlet: 'searchResult' },
{ path: ':listType', component: ListComponent, outlet: 'jobList' }
]
}
];
и мой SearchComponent
шаблон как:
<search-box></search-box>
<router-outlet name="searchResult"></router-outlet>
<!-- Body Container -->
<div class="container">
<div class="row">
<div class="col-sm-8">
<!-- Job Lists Section -->
<section class="job-list">
<div role="tabpanel" class="custom-tab">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" [class.active]="activeTab === 'featured'" routerLinkActive="" [routerLinkActiveOptions]="{exact: true}">
<a [routerLink]="['featured']" aria-controls="featured" role="tab" data-toggle="tab"><i class="material-icons"></i> Featured Jobs</a>
</li>
<li role="presentation" [class.active]="activeTab === 'female-only'">
<a [routerLink]="['female-only']" aria-controls="female" role="tab" data-toggle="tab"><i class="material-icons"></i> Female Only</a>
</li>
<li role="presentation" [class.active]="activeTab === 'expiring-today'">
<a [routerLink]="['expiring-today']" aria-controls="expiring" role="tab" data-toggle="tab"><i class="material-icons"></i> Expiring Today</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<router-outlet name="jobList"></router-outlet>
</div>
</div>
</section>
<!-- End Lists Section -->
</div
</div>
Что я хочу это загрузить routeA
модуль как маршрут по умолчанию основной маршрутизации, так и внутри routeA
маршрут, указанный в модуле, - это маршрут по умолчанию, который используется в качестве параметров маршрута вместо :listType
, а также featured
вкладка выбрана по умолчанию. Но когда я нажимаю на кнопку поиска search-box
компонент, я должен перейти к search
маршрут и filterResultComponent
что я хочу сделать:
1- показывает содержимое вкладки ListComponent
внутри jobList
Роутер-розетка и другие компоненты должны быть внутри розетки "searchResult", а я должен скрыть "ListComponent" и вкладки. Как я должен сделать это с выходом маршрутизатора?