子组件中的 Angular2 RouterLink 期望在父组件中定义路由答案

【问题标题】：Angular2 RouterLink in child component is expecting route to be defined in parent component子组件中的 Angular2 RouterLink 期望在父组件中定义路由
【发布时间】：2016-05-20 10:40:33
【问题描述】：

我正在使用两个组件，一个是父组件，第二个是其模板中的子组件。现在在子组件中，我已经定义了一个路由，并在子组件的模板中放置了一个路由器出口和一个路由器链接。因此，当我单击此链接时，它应该更新其自己的路由器出口处的内容，但它会给出以下错误并正在搜索要在其父组件中定义的路由：

EXCEPTION: Component "ParentComponent" has no route config.in[['ChildRoute'] in ChildComponent@2: 26]

组件是：

@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 { }

假设导入是正确的，为简洁起见，我没有在这里提及。

【问题讨论】：

标签： typescript angular angular2-routing

【解决方案1】：

当你链接到子路由之前定义了父路由

试试这个，

<a [routerLink]="['ParentRoute','ChildRoute']">Edit</a>

【讨论】：

太棒了。当我试图从 ParentRoute 的组件链接到 ChildRoute 中的组件时，这很有效。

【解决方案2】：

要从父级访问子路由，请始终使用

<a [routerLink]=['ParentRouteElement','ChildRouteElement']

并且还应该有一个 childrouteElement 作为默认值。

【讨论】：

【解决方案3】：

在主路由配置中你应该有：

@RouteConfig([
  { name: "Videos", component: ChildrenCmp, path: "/videos/..."}
])

比子组件：

@RouteConfig([
  { name: "ChildCmp" component: ChildCmp, path: "/",
useAsDefault: true}])

Working example on Plunker

【讨论】：

我已将我的 routerLink 放在子组件的模板中，而不是在父组件的模板中，并希望更新子组件 routerOutlet 中的响应
您必须使用路由器配置将一个顶级组件定义为主要组件。
在这种情况下，它正在更新顶级组件的路由器出口的内容，但我想更新子组件的路由器出口中的响应，父出口只是替换我的子组件不想

【解决方案4】：

当您引导您的应用程序时，您可能引用了ParentComponent 作为您的路由器主要组件，而不是ChildComponent。

你可能需要有类似的东西：

bootstrap(ParentComponent, [
  // ...
  provide(ROUTER_PRIMARY_COMPONENT, {useValue: ChildComponent})
]);

【讨论】：

是的，我已经在引导时引用了父组件。除了子组件模板中的 routerLink 之外，它工作正常。
您将 ChildComponent 或 ParentComponent 提供给 ROUTER_PRIMARY_COMPONENT ？
你应该尝试提供 ChildComponent，看我的回答
我的引导文件：bootstrap(ParentComponent, [ ROUTER_PROVIDERS, HTTP_PROVIDERS ]);
正如我在回答中解释的那样尝试：bootstrap(ParentComponent, [ ROUTER_PROVIDERS, HTTP_PROVIDERS, provide(ROUTER_PRIMARY_COMPONENT, {useValue: ChildComponent})]);