Angular2子路由不起作用

Question

我在Angular2中做一個網站，現在我正在做一個產品清單（它已經完成並且可以工作了），現在我需要一個雙向路由，但是當我這樣做時，我遇到了問題

我的代碼：

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是產品列表，請嘗試一下，它可以正常工作。

Answer 1

我相信您的鏈接有誤，但我可能錯了。 試一下：

...
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);
  }
}

這是RouterLink指令的文檔中的鏈接的說明：

第一個路由名稱應以/、./或../開頭。 如果路由以/開頭，則路由器將從應用程序的根目錄查找路由。 如果路由以./開頭，則路由器將在當前組件的子級中查找路由。 如果路由以../開頭，則路由器將查看當前組件的父級。

Answer 2

providers: [ROUTER_PROVIDERS,clasesservice],

不得在子組件上添加ROUTER_PROVIDERS 。 僅在根組件的providers:添加它（或僅在引導程序中添加）