我正在尝试使用 Auxiliary Routes在与发布的问题类似的子组件中 here .由于发布的“解决方案”更像是一种解决方法,我很好奇如何像上面的博文那样做到这一点。
我正在使用 Angular 2.1.2 和 Router 3.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{ }
子模块
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 { }
子组件
import { Component } from '@angular/core';
@Component({
selector: 'child-view',
template: '<router-outlet name="child"></router-outlet>',
})
export class ChildComponent{}
所以当我尝试浏览到/(child:other) 时,我得到了典型的:
错误
Cannot find the outlet child to load 'OtherComponent'
最佳答案
我认为其中有些困惑。
让我们看一下父路由:
- 唯一可用的路由是 path:""它将加载 child.component
对于子路由
- 这是在根本没有被父模块加载的 child.module 中。
我首先尝试的一些事情: - 将命名 socket 添加到 parent.component - 在父路由中添加到其他组件的路由
看看它是否有效。一旦你开始工作....
通过在主路由中执行此操作来加载 child.module:
{ 路径:'child',loadChildren:'app/child.module#ChildModule' }
子路由示例:
{ 路径:'other',组件:OtherComponent,导出:'side'}
那么你可以这样浏览:
/ child /(边:其他)
如果你想试一试,我这里有一个有效的例子: https://github.com/thiagospassos/Angular2-Routing
干杯
关于angular - 在嵌套子组件中使用辅助路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40706961/