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 { }