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」