[英]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 我在Angular2中做一个网站,现在我正在做一个产品清单(它已经完成并且可以工作了),现在我需要一个双向路由,但是当我这样做时,我遇到了问题
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. listproductoscomponent
是产品列表,请尝试一下,它可以正常工作。
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: 这是RouterLink指令的文档中的链接的说明:
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.
如果路由以../开头,则路由器将查看当前组件的父级。
providers: [ROUTER_PROVIDERS,clasesservice],
ROUTER_PROVIDERS
must not be added on child components. 不得在子组件上添加
ROUTER_PROVIDERS
。 Add it only in providers:
of the root component (or alternatively only in bootstrap) 仅在根组件的
providers:
添加它(或仅在引导程序中添加)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.