子组件中的路由器链接答案

【问题标题】：Router link in child component子组件中的路由器链接
【发布时间】：2017-06-21 08:30:53
【问题描述】：

我的顶级应用组件中有一个 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 会更新，但路由器出口不会改变。

我搜索了文档，但我不知道出了什么问题。有人可以解释一下发生了什么吗？

【问题讨论】：

你能解决你的问题吗？
我不知道如何在 plunker 中设置 angular-dart。
“子组件”是哪个组件的子组件？
它是一个简单的组件，带有一些导航菜单 UI，是顶级应用组件模板的一部分。
如果链接位于静态添加到 AppComponent 的组件中，那么它应该像您拥有它一样工作。你在使用 HashLocationStrategy 吗？

标签： angular dart angular-dart

【解决方案1】：

我觉得你需要做路由器链接

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

或

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

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

【讨论】：

【解决方案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

【讨论】：