Angular2 Child Routing not work

Question

Im doing a web in Angular2, now i´m doing a list of products (it s finished and it works) and now i need a double routing but when i do that i have problems

My code:

main.ts

@Component({
  selector: 'main-app',
  template:`
       asdasdas
       <div class="container">
        <router-outlet></router-outlet>
       </div>


  `,
  providers: [ROUTER_PROVIDERS,clasesservice],
  styleUrls:  ['style.css'],
  directives: [ROUTER_DIRECTIVES,proddetalleComponent,Catalogo],
  pipes: [],

})
@RouteConfig([
  {
    path:'/Catalogo/...',
    name: 'Princ_Catalogo',
    component: Catalogo,
    useAsDefault: true
  }

])
export class MainApp {
  constructor ( private router: Router,private clasesservice: clasesservice){}

  gotoTipoprod(tipo:number){
    let link = ['SelecCatalogo',{tipoprod:tipo}];
    this.router.navigate(link);
  }
}

catalogo.ts

    @Component({
  selector: 'catalogo',
  template:`

          <div class="row contenedor_catalogo">
            <ul class="pestanas_catalogo">
              <li (click)="gotoTipoprod(1)">Videojuegos
              </li><li (click)="gotoTipoprod(2)">Series
              </li><li (click)="gotoTipoprod(3)">Peliculas
              </li>
            </ul>
            <router-outlet></router-outlet>
          </div>


  `,
  providers: [ROUTER_PROVIDERS,clasesservice],
  styleUrls:  ['style.css'],
  directives: [ROUTER_DIRECTIVES,proddetalleComponent],
  pipes: [],

})
@RouteConfig([
  {
    path:'/1',
    name: 'Catalogo',
    component: listproductoscomponent,
    useAsDefault: true
  },
  {
    path:'/:tipoprod/:tipo/:filtro',
    name: 'FiltroJ',
    component: listproductosconfiltermenucomponent,
  },
  {
    path:'/:tipoprod',
    name: 'SelecCatalogo',
    component: listproductoscomponent,
  },
  {
    path: '/:tipoprod/:idprod',
    name: 'Detalleprod',
    component:informacionprod
  }

])
export class Catalogo {
  constructor ( private router: Router,private clasesservice: clasesservice){}

  gotoTipoprod(tipo:number){
    let link = ['SelecCatalogo',{tipoprod:tipo}];
    this.router.navigate(link);
  }
}

listproductoscomponent is a list of the products, and try it a it works fine.

Answer 1

I believe your links are wrong, but I could be wrong. Give the following a shot:

...
export class MainApp {
  constructor ( private router: Router,private clasesservice: clasesservice){}

  gotoTipoprod(tipo:number){
    let link = ['/Princ_Catalogo', 'SelecCatalogo', {tipoprod:tipo}];
    this.router.navigate(link);
  }
}

... 
export class Catalogo {
  constructor ( private router: Router,private clasesservice: clasesservice){}

  gotoTipoprod(tipo:number){
    let link = ['../SelecCatalogo', {tipoprod:tipo}];
    this.router.navigate(link);
  }
}

Here is an explanation of the links from the RouterLink directive's documentation:

The first route name should be prepended with /, ./, or ../. If the route begins with /, the router will look up the route from the root of the app. If the route begins with ./, the router will instead look in the current component's children for the route. And if the route begins with ../, the router will look at the current component's parent.

Answer 2

providers: [ROUTER_PROVIDERS,clasesservice],

ROUTER_PROVIDERS must not be added on child components. Add it only in providers: of the root component (or alternatively only in bootstrap)