[英]Angular2 RouterLink in child component is expecting route to be defined in parent component
I am using two components one is parent component and the second one is child component in its template. 我在模板中使用了两个组件,一个是父组件,第二个是子组件。 Now in child component I have defined a route and placed a router outlet and a router link in child component's template.
现在,在子组件中,我定义了一条路由,并在子组件的模板中放置了路由器出口和路由器链接。 So that when I click on this link it should update the contents at its own router outlet but its giving the following error and is searching for a route to be defined in its parent component:
因此,当我单击此链接时,它应在其自己的路由器出口处更新内容,但会出现以下错误,并正在搜索要在其父组件中定义的路由:
EXCEPTION: Component "ParentComponent" has no route config.in[['ChildRoute'] in ChildComponent@2: 26]
The components are: 这些组件是:
@Component({
selector: 'parent-cmp',
template: '<child-cmp></child-cmp>',
directives: [
ROUTER_DIRECTIVES,
ChildComponent
]
})
export class ParentComponent { }
@Component({
selector: 'child-cmp',
template: `
<router-outlet></router-outlet>
<a [routerLink]="['ChildRoute']">Edit</a>
`,
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
{ path: '/edit', name: 'ChildRoute', component: ChildEditComponent }
])
export class ChildComponent { }
Assuming the imports are correct, I haven't mentioned here for brevity. 假设进口是正确的,为简洁起见,我在这里没有提及。
When you make the link to child route defines the route father before 当您建立到子路线的链接时,先定义父路线
try this, 尝试这个,
<a [routerLink]="['ParentRoute','ChildRoute']">Edit</a>
To access child route from parent, always use 要从父级访问子级路由,请始终使用
<a [routerLink]=['ParentRouteElement','ChildRouteElement']
and should have one childrouteElement asDefault also. 并且还应具有一个childrouteElement作为默认值。
In main Route config you should have: 在主Route配置中,您应该具有:
@RouteConfig([
{ name: "Videos", component: ChildrenCmp, path: "/videos/..."}
])
Than in child Component: 比子组件:
@RouteConfig([
{ name: "ChildCmp" component: ChildCmp, path: "/",
useAsDefault: true}])
When you bootstrap your application, you may have referenced the ParentComponent
as your router primary component instead of the ChildComponent
. 引导应用程序时,您可能已引用
ParentComponent
作为路由器的主要组件,而不是ChildComponent
。
You may need to have something like: 您可能需要类似以下内容:
bootstrap(ParentComponent, [
// ...
provide(ROUTER_PRIMARY_COMPONENT, {useValue: ChildComponent})
]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.