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 之 路由与导航

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

angular2系统学习 - 路由与导航(1)基础篇

angular2系统学习 - 路由域导航(1)基础篇本篇内容主要学习路由与导航的基础知识。1.base href如果app文件夹是应用的根目录,则在index.html的head中加入 ...

Angular 2 利用Router事件和Title实现动态页面标题

本篇为译文,点击这里前往原文。 Angular2 为我们提供了名为Title的Service用于修改和获取页面标题,但是如果只是能够在每个页面的ngOnInit方法中为每个页面设置标题岂不是太low了...

2.揭秘angular2学习 ------- 组件

1 概述1.1 组件化标准 - WebComponent1. W3C为统一组件化标准方式,提出Web Component的标准。 2. 每个组件包含自己的html、css、js代码 3. Web Co...

cocos

For the second edition of the Learn Cocos2D book I compiled an alphabetically sorted list of tools...

Angular 2 路由

Angular 2 路由 angular2路由是管理angular2应用内部导航的一个重要内容,在angular应用中,很多的组件是通过组合完成一个复杂的应用,不可避免的是我们常会在视图间切换,那么...

angular2之路由与导航(一)

angualr2路由与导航

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

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

Angular2(五)--router

使用angular声明周期方法,避免在constructor进行太多的工作,只需在constructor中创建和声明变量即可在ngModel的import中导入我们的router,RouterModu...

1.揭秘angular2学习 ------- angualr架构总览

1 核心模块介绍angluar的六大重要部分: 1. 组件 2. 模版 3. 指令 4. 服务 5. 依赖注入 6. 路由下面分别简单介绍。1.1 组件 页面由组件渲染呈现 组件可层层嵌套...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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