我试图在一个子组件中使用
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 举报,一经查实,本站将立刻删除。