Question

由于Angular 2路由器经常更新，因此该主题的旧问题不再有效。我一直在寻找这个问题的解决方案，我还没找到一个......

所以，我的问题是从子组件中定位父组件的路由器 -

例如，我们有一个像这样的AppComponent（我们的应用程序的根目录）：

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import {HeaderComponent}  from './header.component';
import {LibraryComponent}  from './library.component';

@Component({
  selector: 'my-app',
  template: `
  <header></header>
  <library></library>
  <router-outlet></router-outlet>
  `,
  directives: [ROUTER_DIRECTIVES,HeaderComponent,LibraryComponent],
  providers: []
 })
export class AppComponent {

}

HeaderComponent看起来像这样：

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
selector:'header',
template:'<a routerLink="test" routerLinkActive="active">go to TEST</a>',
   directives:[ROUTER_DIRECTIVES]
})
export class HeaderComponent{}

我的app.routes中的主要部分如下所示：

const routes: RouterConfig = [
 {
  path: 'test',
  component: TestComponent
 }
];

我到底错在了什么？当我单击“test”链接时，会创建一个新的“test”div（我假设这是因为TestComponent中的选择器），而router-outlet仍为空。

我还有另外一个问题，为什么我必须导入ROUTER_DIRECTIVES并将其提供给子组件HeaderComponent中的指令，如果我已经在父组件中这样做了？

Answer 1

您可以更新路由器链接，如下所示。

'<a [routerLink]="['../test']" routerLinkActive="active">go to TEST</a>'

如果测试是root，则可以进行绝对导航 '去测试

当与'[]'一起使用时，

RouterLink接受一组命令作为值。

你也可以改变路线 '去测试'

routerLink是一个指令，组件中使用的所有指令都必须在指令属性中提供组件元数据。 ROUTER_DIRECTIVE是@angular/router包中的常量，它为您提供相关指令数组，routerLink就是其中之一。因此，通过使用它，您可以在该数组中添加routerLink指令。你可以（我不确定是否在路由器包中导入）只能传递该数组中的routerLink，它会起作用。

有关详细信息，请参阅official docs

从Angular 2中的子组件定位父级路由器出口？

1 个答案: