7

我正在尝试在类似于此处发布的问题的子组件中使用辅助路由。由于发布的“解决方案”更像是一种解决方法，我很好奇如何像上面的博客文章中那样做。

我将 Angular 2.1.2 与路由器 3.1.2 一起使用。

父模块

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 { }

父组件

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'
4

2 回答 2

0

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

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

这样，孩子的根路由将加载具有命名插座的 ChildComponent，而“其他”路由将在其中加载

于 2016-11-23T04:46:57.580 回答
0

我觉得里面有点混乱。

让我们看一下父路由：

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

对于子路线

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

我首先要尝试的几件事： - 将命名的插座添加到 parent.component - 将路由添加到父路由中的其他组件

看看它是否有效。一旦你得到它的工作......

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

    { 路径：'child'，loadChildren：'app/child.module#ChildModule' }

  • 子路线示例：

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

那么你可以这样浏览：

/孩子/（侧面：其他）

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

干杯

于 2016-11-21T23:24:18.040 回答