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

Question

我正在尝试使用 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'

Answer 1

我认为其中有些困惑。

让我们看一下父路由:

• 唯一可用的路由是 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

干杯