angular – 在嵌套子组件中使用辅助路径

我试图在一个子组件中使用 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,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'

解决方法

我觉得那里有点混乱.

我们来看看父路线:

>唯一可用的路径是路径:“”将加载child.component

对于儿童路线

>这是在child.module中,父模块根本没有加载它.

我先尝试一些事情:
– 将指定的插座添加到parent.component
添加到父路由中其他组件的路由

看看它是否有效.一旦你得到它……

>在主路径中执行以下操作来加载child.module:

{path:’child’,loadChildren:’app / child.module#ChildModule’}
>子路径的示例:

{path:’other’,component:OtherComponent,outlet:’side’}

然后你可以这样浏览:

/儿童/(方:其他)

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

干杯

相关文章

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,...
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...