Angular2 Child Routing not work

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

IMAGE

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.

2
Leave a Reply

avatar
2 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

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… Read more »

Jason
Guest
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)