在嵌套子组件中使用辅助路由

我正在尝试使用类似于here的问题的子组件中的Auxiliary Routes。由于发布的“解决方案”更像是一种解决方法，我很好奇如何在上面的博客帖子中做到这一点。在嵌套子组件中使用辅助路由

我在路由器3.1.2上使用Angular 2.1.2。

parent.module

import { NgModule }    from '@angular/core'; 
import { RouterModule }   from '@angular/router'; 
import { BrowserModule }  from '@angular/platform-browser'; 

import { ParentComponent }  from './parent.component'; 

import { ChildModule }   from '../child/child.public.module'; 
import { ChildComponent }  from '../child/child.public.component'; 

import { OtherModule }   from '../other/other.public.module' 


@NgModule({ 
    imports: [ 
     ChildModule, 
     OtherModule, 
     RouterModule.forRoot([ 
      { path: '', component: ChildComponent } 
     ]) 
    ], 
    declarations: [ ParentComponent ], 
    bootstrap: [ ParentComponent ] 
}) 

export class ParentModule { }

parent.component

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

    @Component({ 
     selector: 'my-app', 
     template: '<router-outlet></router-outlet>' 
    }) 

export class ParentComponent{ }

child.module

import { NgModule }    from '@angular/core'; 
import { RouterModule}   from '@angular/router'; 
import { CommonModule }   from '@angular/common'; 

import { ChildComponent }  from './child.public.component'; 

import { OtherComponent }  from '../other/other.public.component' 

@NgModule({ 
    imports: [ 
     CommonModule, 
     OtherModule, 
     RouterModule.forChild([ 
      {path: 'other', component: OtherComponent, outlet: 'child'} 
     ]) 
    ], 
    declarations: [ ChildComponent ], 
    exports: [ ChildComponent ], 
}) 
export class ChildModule { }

child.component

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

@Component({ 

    selector: 'child-view', 
    template: '<router-outlet name="child"></router-outlet>', 
}) 

export class ChildComponent{}

所以，当我尝试浏览/（子：其他），我得到的典型：

错误

Cannot find the outlet child to load 'OtherComponent'

来源

2016-11-20 Usche

我觉得有一点在那里混乱。

让我们看看父路径：

唯一可用的途径是路径： “” 这将加载child.component

对于孩子的路线

这是在父模块根本不加载的child.module中。

有几件事情我会尝试先： - 指定的出口增加了parent.component - 路由的父路由

看看它是否添加其他组件。一旦你得到它的工作....

负荷child.module通过在主路线这样做：

{路径： '孩子'，loadChildren：“应用程序/子。模块＃ChildModule”}孩子航线的
例如：

{路径： '其他'，成分：OtherComponent，插座： '方'}

，那么你可以浏览这样的：

/孩子/（方：等）

，如果你想给它一个尝试，我得到了在这里工作的例子： https://github.com/thiagospassos/Angular2-Routing个

干杯

来源

2016-11-21 23:24:18

至于我可以看到它，这是同样的解决方案，我在上面提到的这个线程：http：//stackoverflow.com/questions/39893428/auxiliary-router-outlet-inside-primary-router-outlet 事实上，路线是加载由父模块通过路由器实例（.forChild）。否则，它会为丢失的路由抛出错误。主要的问题是，路由器不知道在哪里可以找到嵌套的路由器插座。 – Usche

，因为它没有被加载它无法找到路由器的出口。尝试这样@usche：

RouterModule.forChild([ {path: '', component: ChildComponent}, {path: 'other', component: OtherComponent, outlet: 'child'} ])

这样孩子就会加载它具有命名出口ChildComponent和“其他”路线的根本途径将其内部装载

来源

2016-11-23 04:46:57

这就是我所尝试的，正如所提到的那样：无法找到加载'OtherComponent'的outlet子。 – Usche

创建一个plunker，让你可以看到它的工作。它有一个二级：https://plnkr.co/edit/pSKqvH4vf3HinrZZjWDZ –

在嵌套子组件中使用辅助路由

回答

相关问题