从Angular 2中的子组件定位父级的路由器出口? [英] Targeting parent's router-outlet from child component in Angular 2?

问题描述

由于Angular 2 Router经常更新，因此该主题的旧问题不再有效.我一直在寻找解决此问题的方法，但尚未找到...

Since Angular 2 Router was frequently updated, the old questions for this topic are no longer valid. I have been searching for a solution to this problem and I have yet to find one...

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

So, my problem is targeting parent's component router-outlet from a child component.

例如，我们有一个这样的AppComponent(应用程序的根目录):

For example, we have an AppComponent like this one (root of our app) :

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看起来像这样:

And HeaderComponent looks like this :

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的主要部分如下:

The main part in my app.routes looks like this:

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

我在这里到底在做什么错? 当我单击测试"的链接时，将创建一个新的测试" div(我认为这是由于TestComponent中的选择器所致)，而路由器出口仍为空.

What exactly am I doing wrong here? When I click the link to "test", a new "test" div is created (I assume this is because of the selector in TestComponent) while the router-outlet remains empty.

我还有另一个问题，为什么我必须在父组件中导入ROUTER_DIRECTIVES并将其提供给子组件HeaderComponent中的指令?

Another question I also have is, why do I have to import the ROUTER_DIRECTIVES and also supply it to the directives in the child component HeaderComponent, if I have already done so in the parent component?

推荐答案

是否可以按以下方式更新路由器链接.

Can you update your router link as below.

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

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

if test is root you can do a absolute navigation 'go to TEST

RouterLink与'[]'一起使用时，可接受命令数组作为值.

RouterLink accepts an array of commands as a value when used with '[]'.

您也可以将路线更改为 去测试"

you can also change route to be like 'go to TEST'

routerLink是一个指令，组件中使用的所有指令都必须在指令属性内的组件元数据中提供. ROUTER_DIRECTIVE是@angular/router包中的常量，它为您提供相关指令的数组，而routerLink是其中之一.因此，通过使用它，您可以在该阵列中添加routerLink指令.您可以(我不确定是否以路由器软件包的形式导入)可以仅在该阵列中传递routerLink，并且可以正常工作.

routerLink is a directive and all directives used in a component has to provide in component metadata inside directives property. ROUTER_DIRECTIVE is a constant in @angular/router package which gives you array of relevant directive and routerLink is one of them. Hence by using that you add routerLink directive in that array. You could(I am not sure if imported in router package) can pass just routerLink in that array and it will work.

有关更多详细信息，请参见官方文档

For more details see official docs

这篇关于从Angular 2中的子组件定位父级的路由器出口?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！