angular4-路由

導入，配置路由信息

import { Routes, RouterModule } from '@angular/router';
import { UserComponent } from './user.component';

export const ROUTES: Routes = [
  { 
　　path: 'user', 
　　component: UserComponent ,
　　outlet:'left'
　}
　

  { 
　　path: 'user', 
　　component: UserComponent ,
　　outlet:'right'
 　}

];
 @NgModule({ imports: [ BrowserModule,  RouterModule.forRoot(ROUTES) ], // ... }) 
export class AppModule {}

routerLink 指令

<nav>
  <a routerLink="/">首頁</a>
  <a routerLink="/user">個人</a>
</nav>

router-outlet 指令（該指令用於告訴 Angular 加載組件的文檔位置，當 Angular 路由匹配到響應路徑，併成功找到須要加載的組件時，它將動態建立對應的組件，並將其做爲兄弟元素，插入到 router-outlet 元素中。）

@Component({
  selector: 'app-root',
  template: `
    <div class="app">
      <h3>Our app</h3>
      <router-outlet name="left"></router-outlet>//出口1
　　　 <router-outlet name="right"></router-outlet>

    </div>
  `
})
export class AppComponent {}

路由使用eg:

配置路由信息
export const ROUTES: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'user' },
  { path: 'user', component: UserComponent },
  { path: 'members', component: MembersComponent }
];

@NgModule({
  imports: [BrowserModule, FormsModule, HttpModule,
    RouterModule.forRoot(ROUTES)], // ...
})
export class AppModule { }

配置路由導航
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <div class="app">
      <h1>歡迎來到Angular的世界</h1>
      <nav>
        <a routerLink="/user">個人</a>
        <a routerLink="/members">Angular成員</a>
      </nav>
      <router-outlet></router-outlet>
    </div>
  `,
})
export class AppComponent { }