Angular 2 routing issue

Question

Can somebody help me with angular 2 routing. I have 2 pages.. home and search results page.. Header for home and search results page are different.. here is my code, I am able to display the home page with header but when I go to search results page, header is not getting replaced with new one..

home.routes

 export const HomeRoutes: Routes = [
 { path: '', component: HomeComponent},
 { path: '', component: HomeHeadbarComponent, outlet: 'route1' }
];

search.routes

export const SearchRoutes: Routes = [
 { path: 'search', component: SearchPanelComponent},
 { path: 'search', component: HeadbarComponent, outlet: 'route1' }
];

App.html

<router-outlet name="route1"></router-outlet>

<router-outlet></router-outlet>

Appreciate your help

Answer 1

Your home.routes should be below code this will be redirect to you HomeComponent and if you want to redirect it on SearchPanelComponent both you can use in below code

import { Routes, RouterModule } from '@angular/router';

import { HomeComponent} from './Home';

export const routes: Routes = [

{ path: '', redirectTo: 'Home', pathMatch: 'full' },

{ path: 'Home', component: HomeComponent}, 

{ path: 'search', component: SearchPanelComponent},

];

export const appRoutingProviders: any[] = [

];

export const routing = RouterModule.forRoot(routes);

Answer 2

I assume, that happens because you have empty path path: '' for the first header, so it could overlap the new one. Could you try with the different path, and check it out, should help.

Answer 3

got it working with the code below..

{
    path: 'search',
    children: [
    {
        path: '',
        component: SearchPanelComponent
    },
    {
        path: '',
        component: HeadbarComponent,
        outlet: 'route1'
    }]
}