如何从子组件定位路由器插座？答案

【问题标题】：How can I target router-outlet from a child component?如何从子组件定位路由器插座？
【发布时间】：2016-08-02 16:01:00
【问题描述】：

我有一个左侧导航组件，它被导入到我的主 AppComponent 中。我正在尝试实现的是能够单击左侧导航中的链接，并让它在父 AppComponent 的路由器出口中加载一个 DataComponent。

我的父 AppComponent 如下所示：

import { LeftNavComponent } from 'app/left-nav/left-nav.component';
import { DataComponent } from 'app/data/data.component';

@Component({
  selector: 'main',
  template: '<left-nav></left-nav><router-outlet></router-outlet>',
  directives: [ROUTER_DIRECTIVES, LeftNavComponent]  
})
@RouteConfig([
  {path:'/data', name: 'Data', component: DataComponent}
])

我的孩子 LeftNavComponent 看起来像这样：

@Component({
  selector: 'left-nav',
  directives: [ ROUTER_DIRECTIVES ],
  providers: [ ROUTER_PROVIDERS ],
  template: '<a [routerLink]="[ 'Data' ]">Show Me Data</a>'    
})

我尝试在路由器插座中加载的 DataComponent 如下所示：

@Component({
  selector: 'data',
  templateUrl: 'This is where the data will be'
})

当我单击链接时，url 更改为 /data，但似乎 DataComponent 并未实际加载，因为“这是数据所在的位置”文本没有出现。

我已验证 RouteConfig 工作正常，因为如果我将 router-link 放入 AppComponent 模板中会出现文本，因此问题似乎是 router-link 在子组件中。

任何帮助都会很棒。

【问题讨论】：

标签： angular angular2-routing

【解决方案1】：

我想这就是你想要的：

template: '<a [routerLink]="[ '../Data' ]">Show Me Data</a>'

或者如果它是根组件上的路由：

template: '<a [routerLink]="[ '/Data' ]">Show Me Data</a>'

【讨论】：

感谢您的回复。我都试过了，但似乎都没有。 /Data 导航到正确的 URL，但不加载组件。 ../Data 抛出此异常：链接“[”../Data“]”有太多“../”段。
[ ROUTER_PROVIDERS ], 只能添加到 bootstrap 中或在根组件 AppComponent 上，但从不在任何其他组件上。跨度>
您的代码中还有其他问题。 templateUrl 而不是 template（可能只是复制粘贴问题）。 ' 围绕left-nav 的模板与' 围绕'data' 冲突。我将外部更改为反引号（可能也只是复制粘贴问题）。 Working Plunker
谢谢！我也错过了 main.ts 中的位置策略。对困惑感到抱歉。在我的实际代码中，我将模板放在单独的文件中。试图将它们粘贴在组件中以保持代码 sn-ps 在这里简短，并最终引入了那些语法问题。
是的！万分感谢。我搜索了几个小时，但找不到答案。