Question

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

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

我认为那里有点混乱。

让我们看一下父路线：

唯一可用的路线是路径：＆＃34;＆＃34;这将加载child.component

对于儿童路线

这是在父模块完全没有加载的child.module中。

我首先尝试的一些事情： - 将指定的插座添加到parent.component - 添加到父路径中其他组件的路径

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

通过在主路径中执行此操作来加载child.module：

{路径：＆＃39;孩子＆＃39;，loadChildren：＆＃39; app / child.module＃ChildModule＆＃39; }
子路线的示例：

{路径：＆＃39;其他＆＃39;，组件：其他组件，插座：＆＃39;侧＆＃39;}

然后你可以这样浏览：

/儿童/（方：其它）

如果你想尝试一下，我在这里有一个有效的例子： https://github.com/thiagospassos/Angular2-Routing

干杯

Answer 2

它无法找到路由器插座，因为它没有被加载。试试这样的东西@usche：

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

通过这种方式，子进程的根路由将加载ChildComponent，它具有指定的出口和＆＃39;其他＆＃39;路线将加载到其中

在嵌套子组件

2 个答案: