基本路由

路由器允許基於使用者與應用程式的互動從一個檢視導航到另一個檢視。

以下是在 Angular 2 中實現基本路由的步驟 -

基本預防措施 ：確保你擁有標籤

    <base href='/'> 

作為 index.html 檔案中頭標記下的第一個子項。此標記告訴你的 app 資料夾是應用程式根目錄。Angular 2 會知道組織你的連結。

第一步是檢查是否指向 package.json 中的正確/最新路由依賴項 -

"dependencies": {
  ......
  "@angular/router": "3.0.0-beta.1",
  ......
}

第二步是根據類的定義定義路徑 -

class Route {
  path : string
  pathMatch : 'full'|'prefix'
  component : Type|string
  .........
}

在路徑檔案（route/routes.ts）中，匯入需要為不同路由路徑配置的所有元件。空路徑表示預設情況下載入檢視。路徑中的“：”表示傳遞給已載入元件的動態引數。

通過依賴注入使路由可用於應用程式。使用 RouterConfig 作為引數呼叫 ProviderRouter 方法，以便可以將其注入元件以呼叫特定於路由的任務。

import { provideRouter, RouterConfig } from '@angular/router';
import { BarDetailComponent } from '../components/bar-detail.component';
import { DashboardComponent } from '../components/dashboard.component';
import { LoginComponent } from '../components/login.component';
import { SignupComponent } from '../components/signup.component';

export const appRoutes: RouterConfig = [
  { path: '', pathMatch: 'full', redirectTo: 'login' },
  { path: 'dashboard', component: DashboardComponent },
  { path: 'bars/:id', component: BarDetailComponent },
  { path: 'login', component: LoginComponent },
  { path: 'signup',   component: SignupComponent }
];

export const APP_ROUTER_PROVIDER = [provideRouter(appRoutes)];

第三步是引導路由提供程式。

在你的 main.ts 中（它可以是任何名稱。基本上，它應該是你在 systemjs.config 中定義的主檔案）

import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './components/app.component';
import { APP_ROUTER_PROVIDER } from "./routes/routes";

bootstrap(AppComponent, [ APP_ROUTER_PROVIDER ]).catch(err => console.error(err));

第四步是根據訪問的路徑載入/顯示路由器元件。directive 用於告知角度載入元件的位置。要使用匯入 ROUTER_DIRECTIVES。

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

@Component({
  selector: 'demo-app',
  template: `
    ....................................
    <div>
      <router-outlet></router-outlet>
    </div>
    ....................................
  `,
  // Add our router directives we will be using
  directives: [ROUTER_DIRECTIVES]
})

第五步是連結其他路線。預設情況下，RouterOutlet 將載入在 RouterConfig 中指定了空路徑的元件。RouterLink 指令與 html anchor 標籤一起使用，以載入附加到路由的元件。RouterLink 生成用於生成連結的 href 屬性。對於 Ex：

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

@Component({
  selector: 'demo-app',
  template: `
    <a [routerLink]="['/login']">Login</a>
    <a [routerLink]="['/signup']">Signup</a>      
    <a [routerLink]="['/dashboard']">Dashboard</a>
    <div>
      <router-outlet></router-outlet>
    </div>
  `,
  // Add our router directives we will be using
  directives: [ROUTER_DIRECTIVES]
})
export class AppComponent { }

現在，我們很好地路由到靜態路徑。RouterLink 還通過傳遞額外的引數和路徑來支援動態路徑。

從’@angular / core’匯入{Component}; 從’@angular / router’匯入{ROUTER_DIRECTIVES};

@Component({
  selector: 'demo-app',
  template: `
        <ul>
          <li *ngFor="let bar of bars | async">
            <a [routerLink]="['/bars', bar.id]">
              {{bar.name}}
            </a>
          </li>
        </ul>
    <div>
      <router-outlet></router-outlet>
    </div>
  `,
  // Add our router directives we will be using
  directives: [ROUTER_DIRECTIVES]
})
export class AppComponent { }

RouterLink 採用一個陣列，其中第一個元素是路由路徑，後續元素是動態路由引數。