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>只是显示与[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 {
}

然而，当点击此链接时，没有任何反应（甚至控制台上都没有弹出消息）。 MyApp模板中的链接可以很好地找到。使用(click)=... router.navigate(...)处理程序也不起作用。

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

可以使用完整的示例on Plunker

Answer 1

我的示例正在运行here，但我必须添加相当多的代码。问题是ALinkComponent没有RouteConfig自己的MyApp，因此需要访问navigate的路由器并调用其org.codehaus.jackson.annotate.JsonIgnore方法。

Answer 2

基于@MattScarpino's answer非常有用的答案和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路由链接无效

2 个答案: