子组件中的路由器 link

Question

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

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

而且我有一个应该包含导航 link 的子组件。我定义子组件并在我使用的模板中：

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

如果我将 link 放在应用程序组件中，一切正常，但如果我将它们移至子组件，当我单击link，但路由器插座没有变化

我搜索了文档，但无法弄清楚哪里出了问题。有人可以解释一下这是怎么回事吗？

Answer 1

如果您在子组件中遗漏了以下内容，则移动 <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

Answer 2

我认为你需要制作路由器 link

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

或

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

如果 routerLink 在 AdminSite 或 ManagerSite 组件中，否则路由器将尝试导航到包含您的 "child component" 的组件的子路由.

子组件中的路由器 link

Router link in child component

dart

angular-dart

angular