Question

我的顶级应用程序组件中有一个RouteConfig定义如下：

@RouteConfig(const [
  const Route(path: '/admin', name: 'AdminSite', component: AdminSite),
  const Route(path: '/', name: 'ManagerSite', component: ManagerSite, useAsDefault: true),
])

我有一个应该保存导航链接的子组件。我定义了子组件和我使用的模板：

  <nav>
    <a *ngIf="authService.user?.is_admin" [routerLink]="['AdminSite']">Admin</a>
    <a [routerLink]="['ManagerSite']">Home</a>
  </nav>

如果我将链接放在应用程序组件中，一切正常，但如果我将它们移动到子组件，则单击链接时浏览器地址行中的URL会更新，但路由器插座不会更改。

我搜索了文档，但我无法弄清楚什么是错的。有人可以解释一下发生了什么吗？

Answer 1

我认为你需要建立路由器链接

<a [routerLink]="['/ManagerSite']">Home</a>

或

<a [routerLink]="['../ManagerSite']">Home</a>

如果routerLink位于AdminSite或ManagerSite组件中，否则路由器会尝试导航到包含“子组件”的组件的子路由。

Answer 2

如果您错过了子组件中的以下内容，那么移动<a>(anchor)标签将无法正常工作。

导入ROUTER_DIRECTIVES

import {RouteConfig, RouterOutlet, ROUTER_DIRECTIVES} from 'angular2/router';
提供正确的路径

<a *ngIf="authService.user?.is_admin" [routerLink]="['AdminSite']">Admin</a> <a [routerLink]="['ManagerSite']">Home</a>

类似['./ManagerSite']或['./AdminSite']

工作plunker

在该plunker中检查此文件app/crisis-center/crisis-center.component.ts

子组件中的路由器链接

2 个答案: