微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

干杯

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐