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

原创 2017年01月03日 21:39:21

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()
版权声明:随意看随意转,对你有帮助就好。

angular2 router中的路由跳转navigate

navigate是Router类的一个方法,主要用来跳转路由。 函数定义:navigate(commands: any[], extras?: NavigationExtras) : Promise...

AngularJS+Bootstrap3多级导航菜单

AngularJS体验式编程系列文章,将介绍如何用angularjs构建一个强大的web前端系统。angularjs是由Google团队开发的一款非常优秀web前端框架。在当前如此多的web框架下,a...
  • sqzhao
  • sqzhao
  • 2015年10月13日 17:09
  • 7887

angularJS2中的界面跳转

链接参数数组保存路由导航时所需的成分:指向目标组件的那个路由的路径(path)必备路由参数和可选路由参数,它们将进入该路由的URL 我们可以把RouterLink指令绑定到一个数组,就像这样:Hero...

Angular2 之 路由与导航

导航是很简单的,只是不同页面之间的切换,路由是实现导航的一种。一个url对应的一个页面,在angular2中是一个组件。定义一个规则。设计的时候,先去基础知识 大多数带路由的应用都要在index...

Angular2 router.navigate刷新页面问题

造成这个问题一般是因为我们在表单中使用时忘记添加type属性,在表单中,如果忘记给按钮添加属性,会默认为submitdetailtoDetail() { this._router.naviga...

第四章 Backbonejs中的Router实践

第四章 Backbonejs中的Router实践 前面介绍了Model和Collection,基本上属于程序中静态的数据部分。这一节介绍Backbone中的router,属于动态的部分,见名知意...
  • cdnight
  • cdnight
  • 2014年10月21日 21:18
  • 3619

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

angular2系统学习 - 路由域导航(2)1.模块注册路由NgModule注册路由分根模块(AppModule)与子模块注册路由,只有根模块AppModule才能使用forRoot()方法。 - ...

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

angular2系统学习 - 路由与导航(4) 1.路由守卫 路由守卫其实就是一种拦截机制,在进入离开视图等时的拦截行为。 守卫返回true,则继续运行;返回false则停止导航。常用于权限控制...

Angular 2 + 折腾记 :(4)初步了解路由及使用

路由这块的水挺深,我这里扯扯我用过的一些特性及一丢丢的经验
  • bomess
  • bomess
  • 2017年03月28日 17:08
  • 4328

Angular开发(十八)-路由的基本认识

一、学单词:angular路由中涉及到很多新单词词汇 单词 说明 使用场景 Routes 配置路由,保存URL对应的组件,以及在哪个RouterOutlet中展现 Rout...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:angular2系统学习 - 路由与导航(3)
举报原因:
原因补充:

(最多只允许输入30个字)