如何从子组件定位路由器出口？

Question

我有一个左导航组件，它被导入到我的主 AppComponent 中。我要实现的是单击左侧导航栏中的 link 并让它在父 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'
})

当我单击 link 时，url 更改为 /data，但似乎没有实际加载 DataComponent，因为 'This is where the data will be' 文本没有出现。

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

任何帮助都会很棒。

Answer 1

我想这就是你想要的：

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

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

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

如何从子组件定位路由器出口？

How can I target router-outlet from a child component?

angular

angular2-routing