基本路由

路由器允许基于用户与应用程序的交互从一个视图导航到另一个视图。

以下是在 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 采用一个数组，其中第一个元素是路由路径，后续元素是动态路由参数。