Angular2 (RC5) 路由與導航詳解

2019-11-20 08:55:17

字體：大中小

來源：轉載

供稿：網友

之前總結過RC4的路由配置，Angular2升級RC5之后增加了NgModule和RouterModule等等很多組件，所以現在的路由配置方式也變化比較大。

1.<base href>

大多數帶路由的應用都要在 index.html 的 <head>標簽下頂部添加一個<base>元素。

2.配置路由器

app.routing.ts

import { Routes, RouterModule } from '@angular/router';const appRoutes: Routes = [  {    path: '',    redirectTo: '/dashboard',    pathMatch: 'full'  },  {    path: 'heroes',    component: HeroesComponent  },  {    path: 'dashboard',    component: DashboardComponent  },  {    path: 'detail/:id',    component: HeroDetailComponent  }]export const routing = RouterModule.forRoot(appRoutes);

創建一個Routes類型數組，它會把每一個URL匹配到path，匹配成功則映射到該path對應的組件component上。
然后把這個路由數組appRoutes通過RouterModule.forRoot(appRoutes)導出。

3.引用路由

app.module.ts

import { routing } from './app.routing';@NgModule({  imports: [    BrowserModule,    routing  ],  declarations: [    AppComponent    // some component  ],  bootstrap: [ AppComponent ]})export class AppModule {}

就這樣，我們在@NgModule的imports中引用了我們配置好的路由器。

4.在模板中使用路由

完成上面的2、3步驟，我們就能在模板中使用路由了

app.component.ts

template: `   <nav>     <a routerLink='/dashboard' routerLinkActive='active'>Dashboard</a>     <a routerLink='/heroes' routerLinkActive='active'>Heroes</a>   </nav>   <router-outlet></router-outlet>`

我們在<a>標簽中添加了routerLink指令，可以一次性綁定到我們路由中的path值。
如果這個URL的path和routerLink匹配，就把映射到的組件在<router-outlet>中顯示。

我們還可以往<a>中添加一個routerLinkActive指令，用于在相關的routerLink被激活時所在元素添加或移除CSS類。該指令可以直接添加到該元素上，也可以直接添加到其父元素上。

5.總結

在此，我們就完成了Angular2 (RC5)的路由配置。RC5和RC4的路由配置不同之處就在于， RC5的路由不需要在設置路由模板的TS文件導入路由庫

import { ROUTER_DIRECTIVES } from '@angular/router';

直接在NgModule中引入配置好的路由就可以