angular 2 - 004 routing 路由

定义一个模块用来定义路由

src/app/app-routing.module.ts

import { NgModule }             from '@angular/core';

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

import { DashboardComponent }   from './dashboard/dashboard.component';

import { HeroesComponent }      from './heroes/heroes.component';

import { HeroDetailComponent }  from './hero-detail/hero-detail.component';

const routes: Routes = [

  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },

  { path: 'dashboard', component: DashboardComponent },

  { path: 'detail/:id', component: HeroDetailComponent },

  { path: 'heroes', component: HeroesComponent }

];

@NgModule({

  imports: [ RouterModule.forRoot(routes) ],

  exports: [ RouterModule ]

})

export class AppRoutingModule {}

引入和声明

src/app/app.module.ts

import { NgModule }       from '@angular/core';

import { BrowserModule }  from '@angular/platform-browser';

import { FormsModule }    from '@angular/forms';

import { AppComponent }         from './app.component';

import { DashboardComponent }   from './dashboard/dashboard.component';

import { HeroDetailComponent }  from './hero-detail/hero-detail.component';

import { HeroesComponent }      from './heroes/heroes.component';

import { HeroService }          from './hero.service';

import { MessageService }       from './message.service';

import { MessagesComponent }    from './messages/messages.component';

import { AppRoutingModule }     from './app-routing.module';

@NgModule({

  imports: [

    BrowserModule,

    FormsModule,

    AppRoutingModule

  ],

  declarations: [

    AppComponent,

    DashboardComponent,

    HeroesComponent,

    HeroDetailComponent,

    MessagesComponent

  ],

  providers: [ HeroService, MessageService ],

  bootstrap: [ AppComponent ]

})

export class AppModule { }

添加router-outlet用于动态显示内容, 就是ng1中的ui-view

<h1>{{title}}</h1>

<nav>

  <a routerLink="/dashboard">Dashboard</a>

  <a routerLink="/heroes">Heroes</a>

</nav>

<router-outlet></router-outlet>

<app-messages></app-messages>

路由定义 - 参数, 嵌套

代码路由跳转

除了通过主页这种方式进行导航之外，我们还可以通过代码的方式来手动进行导航：

this.router.navigate(["/jokes"],{ queryParams: { page: 1,name:222 } });

接受参数的方式如下：

this.activeRoute.queryParams.subscribe(

    (queryParam) => { console.log(queryParam) }

);

完整可运行的代码在这里，这个例子对应的代码在 router-params 分支上。

一、router.navigate的使用

navigate是Router类的一个方法，主要用来跳转路由。

函数定义：

navigate(commands: any[], extras?: NavigationExtras) : Promise``

interface NavigationExtras {

 relativeTo : ActivatedRoute

 queryParams : Params

 fragment : string

 preserveQueryParams : boolean

 preserveFragment : boolean

 skipLocationChange : boolean

 replaceUrl : boolean

}

1.this.router.navigate(['user', 1]);

以根路由为起点跳转

2.this.router.navigate(['user', 1],{relativeTo: route});

默认值为根路由，设置后相对当前路由跳转，route是ActivatedRoute的实例，使用需要导入ActivatedRoute

3.this.router.navigate(['user', 1],{ queryParams: { id: 1 } });

路由中传参数 /user/1?id=1

4.this.router.navigate(['view', 1], { preserveQueryParams: true });

默认值为false，设为true，保留之前路由中的查询参数/user?id=1 to /view?id=1

5.this.router.navigate(['user', 1],{ fragment: 'top' });

路由中锚点跳转 /user/1#top

6.this.router.navigate(['/view'], { preserveFragment: true });

默认值为false，设为true，保留之前路由中的锚点/user/1#top to /view#top

7.this.router.navigate(['/user',1], { skipLocationChange: true });

默认值为false，设为true路由跳转时浏览器中的url会保持不变，但是传入的参数依然有效

8.this.router.navigate(['/user',1], { replaceUrl: true });

未设置时默认为true，设置为false路由不会进行跳转

一、学单词:angular路由中涉及到很多新单词词汇

单词	说明	使用场景
Routes	配置路由，保存URL对应的组件，以及在哪个RouterOutlet中展现
RouterOutlet	在html中标记挂载路由的占位容器
Router	在ts文件中负责跳转路由操作	Router.navigate([“/xxx”]),Router.navigateByUrl(“/xxx”)
routerLink	在html中使用页面跳转	`<a [routerLink]="['/xx']"`
routerLinkActive	表示当前激活路由的样式	routerLinkActive=”active”
ActivedRoute	获取当前激活路由的参数,	这个是一个类，要实例化，使用实例化后的对象.params,xx.queryParams
redirectTo	重定向	redirectTo=”/路径”
useHash	使用哈希值展现	{useHash:true}
pathMatch	完全匹配	pathMatch:”full”

秒客网