来自子组件的 Angular2 route-link 无效

Question

当我尝试使用 Angular2 的路由器 (2.0 beta 6) 时，我遇到了有关从子组件调用 routeLink（或 router.navigate）的问题。

我的主要组件如下所示：

@Component({
  selector: 'myapp',
  template:`
  <div>
    <alink></alink>
    <router-outlet></router-outlet>
  </div>
  `,
  directives: [ROUTER_DIRECTIVES, ALinkComponent],
  providers: [ROUTER_PROVIDERS]
})
@RouteConfig([
    {
      path: '/first',
      name: 'First',
      component: FirstComponent,
      useAsDefault: true
    },
    {
      path: '/second',
      name: 'Second',
      component: SecondComponent
    }
])
export class MyApp {
}

<alink> 简单地显示 link 和 [routerLink] 到 Second:

@Component({
  selector: 'alink',
  template: `<h3><a [routerLink]="['Second']">Should redirect to second</a></h3>`,
  directives: [ROUTER_DIRECTIVES],
  providers: [ROUTER_PROVIDERS]
})
export class ALinkComponent {
}

但是，当单击此 link 时，没有任何反应（甚至控制台上也没有弹出消息）。来自 MyApp 模板的 link 可以完美地找到。将 (click)=... 处理程序与 router.navigate(...) 一起使用也不起作用。

我需要更改什么才能使 routerLink 在任何嵌套组件中工作？

有一个完整的例子on Plunker

Answer 1

我让您的示例运行 here，但我必须添加大量代码。问题是 ALinkComponent 没有自己的 RouteConfig，所以它需要访问 MyApp 的路由器并调用它的 navigate 方法。

Answer 2

基于 very helpful answer and this blogpost，我找到了一种更简单的方法，无需直接注入 MyApp：

@Component({
  selector: 'alink',
  template: `<h3><a (click)="viewSecond()">Should redirect to second but does not</a></h3>`,
  directives: [ROUTER_DIRECTIVES],
  providers: [ROUTER_PROVIDERS]
})
export class ALinkComponent {
  constructor(injector: Injector) {
    this.router = injector.parent.get(Router);
  }

  viewSecond() {
    this.router.navigate(["Second"])
  }
}

这种解决方案的缺点是我们可能需要根据情况使用parent或parent.parent。但是，我们避免显式引用顶层组件。

来自子组件的 Angular2 route-link 无效

Angular2 route-link from child component has no effect

angular

angular2-routing