Angular2子路由不起作用

Question

我正在Angular2中做一个网站，现在我正在做一个产品列表（它已完成并且有效）现在我需要双路由但是当我这样做时我有问题

我的代码：

Traceback (most recent call last): File "<stdin>", line 1, in <module> File "C:\Python27\lib\site-packages\spyderlib\widgets\externalshell\sitecustomize.py", line 685, in runfile execfile(filename, namespace) File "C:\Python27\lib\site-packages\spyderlib\widgets\externalshell\sitecustomize.py", line 71, in execfile exec(compile(scripttext, filename, 'exec'), glob, loc) File "E:/programming/python scripts/test5.py", line 29, in <module> result = gmod.fit(Y, x=X,y0=0,xc=0,A=0.1,wG=0.5,wL=0.5) File "build\bdist.win32\egg\lmfit\model.py", line 542, in fit File "build\bdist.win32\egg\lmfit\model.py", line 746, in fit File "build\bdist.win32\egg\lmfit\model.py", line 408, in eval File "voigt_PD.py", line 13, in voigt_PD return y0+(A*(2*log(2)/pi**1.5)*(wL/wG**2)* (quad(integconvo,-inf,inf,args=(x,xc,wG,wL)))[0]) File "C:\Python27\lib\site-packages\scipy\integrate\quadpack.py", line 311, in quad points) File "C:\Python27\lib\site-packages\scipy\integrate\quadpack.py", line 378, in _quad return _quadpack._qagie(func,bound,infbounds,args,full_output,epsabs,epsrel,limit) quadpack.error: Supplied function does not return a valid float.

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); } } 是产品列表，尝试一下就可以了。

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:中添加（或者在引导程序中仅 ）