基本路由

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

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

注意 ：確保你有此標記：

<base href='/'> 

作為 index.html 檔案中頭標記下的第一個子項。此元素表明你的 app 資料夾是應用程式根目錄。然後 Angular 將知道如何組織你的連結。

1. 檢查你是否指向 package.json 中的正確/最新路由依賴項（使用最新版本的 Angular）並且你已經執行了 npm install -

   "dependencies": {
       "@angular/router": "^4.2.5"
   }
   

2. 根據介面定義定義路由：

   interface Route {
     path?: string;
     pathMatch?: string;
     component?: Type<any>;
   }
   

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

   import { Routes, RouterModule } from '@angular/router';
   import { ModuleWithProviders } from '@angular/core';
   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 APP_ROUTES: Routes = [
       { 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_ROUTING: ModuleWithProviders = RouterModule.forRoot(APP_ROUTES);
   

4. 在你的 app.module.ts 中，將它放在 @NgModule([]) 下的 @NgModule([]) 下：

   // Alternatively, just import 'APP_ROUTES
   import {APP_ROUTING} from '../routes/app.routing.ts';
   @NgModule([
       imports: [
           APP_ROUTING
           // Or RouterModule.forRoot(APP_ROUTES)
       ]
   ])
   

5. 根據訪問的路徑載入/顯示路由器元件。<router-outlet>directive 用於指示角度載入元件的位置。

   import { Component } from '@angular/core';
   
   @Component({
       selector: 'demo-app',
       template: `
           <div>
               <router-outlet></router-outlet>
           </div>
       `
   })
   export class AppComponent {}
   

6. 連結其他路線。預設情況下，RouterOutlet 將載入 Routes 中指定了空路徑的元件。RouterLink 指令與 html 錨標籤一起使用，以載入附加到路由的元件。RouterLink 生成用於生成連結的 href 屬性。例如：

   import { Component } from '@angular/core';
   
   @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>
           `
   })
   export class AnotherComponent { }
   

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

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

@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>
  `
})
export class SecondComponent { }

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