angular 2 - 004 routing 路由

https://angular.io/tutorial/toh-pt5

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

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 分支上。

1、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路由不会进行跳转

1、学单词: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”