Question

我有一个左导航组件导入我的主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'
})

当我点击链接时，网址会更改为/ data，但似乎DataComponent实际上并没有被加载，因为“这就是数据所在的位置”。文字没有出现。

我已经验证了RouteConfig是否正常工作，因为如果我将路由器链接放在AppComponent模板中，则会显示文本，因此问题似乎是路由器链接位于子组件中。 / p>

任何帮助都会很棒。

Answer 1

我认为这就是你想要的：

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

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

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

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

1 个答案: