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

Question

我正在尝试在子组件中使用辅助路由,类似于此处发布的问题.由于发布的"解决方案"更像是一种解决方法,我很好奇如何在上面的博文中做到这一点.

我在路由器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{}

所以,当我尝试浏览/(child:other)时,我会得到典型的:

错误

Cannot find the outlet child to load 'OtherComponent'

Answer 1

我认为这里面有一点混乱。

我们看一下父路由：

• 唯一可用的路线是 path:"" 它将加载 child.component

对于子路由

• 这是在 child.module 中，父模块根本没有加载它。

我首先尝试的一些事情： - 将命名的出口添加到parent.component - 在父路由中添加到其他组件的路由

看看是否有效。一旦你让它工作......

• 通过在主路由中执行以下操作来加载 child.module：

  { 路径: 'child', loadChildren: 'app/child.module#ChildModule' }

• 子路由示例：

  { 路径：'其他'，组件：OtherComponent，出口：'侧面'}

那么你可以这样浏览：

/子/（侧面：其他）

如果您想尝试一下，我这里有一个工作示例： https://github.com/thiagospassos/Angular2-Routing

干杯