关闭

angular2系统学习 - 路由与导航(3)

标签: angular2
1121人阅读 评论(1) 收藏 举报
分类:

angular2系统学习 - 路由与导航(3)

1.主子路由

上一部分内容我们主要学习了特性模块与特性路由,那这一部分我们就来讲讲非常类似的主子路由。

学习了上一部分特性路由后发现,所有特性模块的组件都只能单独的显示,没有特性壳组件,而不能列表、列表项同时展示。

这样的需求就用到了本次学习的内容------主子路由。

主子路由允许你在子路由壳中放入<router-outlet>标签,并将需要展示的组件视图放在这个标签的后面。

下面就来学习。

还是先将文件和代码列出,以便对结构有印象。
结构 说明
AppModule 根模块
AppRoutingModule 根路由
AppComponent 根组件壳
ParAComponent 根模块组件A
ParBComponent 根模块组件B
- -
ChildModule 子模块
ChildRoutingModule 子路由
ChildCompnent 子组件壳
ChildAComponent 子组件A
ChildBComponent 子组件B
ChildCComponent 子组件C
下面是各结构核心代码

AppModule

import { ChildModule } from './child/child.module.ts';

@NgModule({
    imports: [
        ChildModule,
        AppRouting
    ],
    declarations: [
        AppComponent,
        ParAComponent,
        ParBComponent
    ],
    bootstrap:[ AppComponent ]
})
export class AppModule { }
与特性模块相同,根模块也是在imports中引用了子模块。

AppRoutingModule

import { RouterModule, Routes } from '@angular/router';

appRoutes: Routes = [
    { path: 'parA', component: ParAComponent },
    { path: 'parB', component: ParBComponent },
];

@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes)
    ],
    exports: [ RouterModule ]
})
export class AppRoutingModule { }
根路由与上一部分的特性路由也没有什么区别。注意一点,根路由没有设置默认路由。

ChildModule

import { ChildRoutingModule } from './child/child-routing.module.ts';

@NgModule({
    imports: [
        ChildRoutingModule
    ],
    declarations: [
        ChildAComponent,
        ChildBComponent,
        ChildCComponent
    ],
    bootstrap:[ AppComponent ]
})
export class ChildModule { }
呃...这里依然没啥区别

ChildRoutingModule

import { RouterModule, Routes } from '@angular/router';

const childRoutes: Routes = [
    {
        path: '',
        component: ChildComponent,
        children: [{
            path: '',
            children:[
                { path: '', component: ChildComponent },
                { path: 'childA', component: ChildAComponent },
                { path: 'childB', component: ChildBComponent },
                { path: 'childC', component: ChildCComponent }
            ]
        }]
    }
];

@NgModule({
    imports: [
        RouterModule.forChild(childRoutes)
    ],
    exports: [ RouterModule ]
})
export class ChildRoutingModule { }
注意,这里有区别了。

首先,这里的路由配置中出现了path: '',这里可以解释成默认路由显示视图,从url路径匹配的思路来想就可以。

第一个children中没有指定组件,这种情况是使用无组件路由,不是配置错误
另外这个默认视图,是挂在AppRoutingModule中的,也就是说这个ChildComponent是根路由数组中的一项。

其次,这里出现了children配置,没错,这里就是配置子路由的地方。这些子路由挂在了ChildComponent壳中。所以ChildComponent中要有<router-outlet>标签,来告诉这些子路由视图挂在什么地方。

另外这里的imports中依然使用了forChild方法,上一部分已经说过,只有根路由才使用forRoor(),其他地方都使用forChild。

2.相对导航

在js中,我们可以使用./ ../来进行路径相对定位,在ng2的路由中,我们也可以使用这种方法。

首先我们需要知道相对于什么位置进行导航,所以先要有个参照路径。参照路径可以从ActivatedRoute中获取。

    this.router.navigate(['/child-center'], { relativeTo: this.route})

这里就是相对于当前route(this.route)进行导航,导航至/child-center。

如果当前url是xxx:8080,那么导航后的结果:
xxx:8080/child-center

也可以导航至上一层

    this.router.navigate(['../'], { id: 1, foo: 'foo' }, {relativeTo: this.route})

3.绝对导航

    this.router.navigateByUrl()
1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:47745次
    • 积分:1662
    • 等级:
    • 排名:千里之外
    • 原创:124篇
    • 转载:1篇
    • 译文:0篇
    • 评论:9条
    文章分类
    最新评论