詳解angular2實(shí)現(xiàn)ng2-router 路由和嵌套路由

import {RouterModule, Routes} from "@angular/router";

  import {BrowserModule} from "@angular/platform-browser";
  import {NgModule} from "@angular/core";
  import {RouterModule, Routes} from "@angular/router";

  // 表單 雙向數(shù)據(jù)綁定
  import {FormsModule} from "@angular/forms";
  import {AppComponent} from "./app.component";
  // List中包含兩個(gè)tab子組件
  import {ListComponent} from "./list.component";
  import {ListOneComponent} from "./list-one.component";
  import {ListTwoComponent} from "./list-two.component";
  import {HomeComponent} from "./home.component";
  // 定義路由, bootstrap默認(rèn)加載組件就是AppComponent,所以他就是主頁導(dǎo)航頁,然后添加的路由都在他的模板中。

  // 可以所有代碼寫在NgModule中, 也可以這樣自定義常量,然后使用。

  // 定義常量 嵌套自路由
  const appChildRoutes: Routes = [
   {path: "one", component: ListOneComponent},
   {path: "two", component: ListTwoComponent},
   // 如果地址欄中輸入沒有定義的路由就跳轉(zhuǎn)到one路由界面
   {
    path: '**', redirectTo: "one"
   }
  ];
  // 定義常量 路由
  const appRoutes:Routes = [
   {path: '', component: HomeComponent},
   {
    path: 'list',
    component: ListComponent,
    children: appChildRoutes
  ];
  // 引用定義的路由
  @NgModule({
   imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(appRoutes)
   ],
   declarations: [
    AppComponent,
    ListComponent,
    HomeComponent,
    ListOneComponent,
    ListTwoComponent
   ],
   bootstrap: [AppComponent]
  })
  export class AppModule {
  
  }

  import {Component} from "@angular/core";
  @Component({
   selector: "my-app",
   // templateUrl: "../views/one.html"
   template: `
        <div>
        <!--使用了bootstrap樣式的導(dǎo)航，routerLinkActive，表示路由激活的時(shí)候，談價(jià)active類樣式-->
         <ul class="nav navbar-nav">
          <li routerLinkActive="active"><a routerLink="home">首頁</a></li>
          <li routerLinkActive="active"><a routerLink="contact">聯(lián)系我們</a></li>
          <li routerLinkActive="active"><a routerLink="product">產(chǎn)品</a></li>
         </ul>
         <!--路由內(nèi)容顯示區(qū)域-->
         <router-outlet></router-outlet>
        </div>
        `
  })
  export class AppComponent {
  
  }

  import {Component} from "@angular/core";
  @Component({
    selector: "my-list",
    // templateUrl: "../views/list.html"
    template: `
       <div>
        <!-- 子路由連接 -->
        <a routerLink="one">one</a>
        <a routerLink="two">two</a>
        <!-- 路由內(nèi)容顯示標(biāo)簽 -->
        <router-outlet></router-outlet>
       </div>
     `
  })
  export class ListComponent {
    name = "list";
  }

  import {Component} from "@angular/core"
  @Component({
    selector: "my-list-one",
    template:`
      {{name}}
    `
  })
  export class ListOneComponent {
    name = "list-one";
    }

  import {ActivatedRoute} from "@angular/router";  
  export class AboutList {
    id: Object;
    constructor(public route:ActivatedRoute) {
      this.id = {};
    }
    ngOnInit() {
      this.route.params.subscribe(params => {
        this.id = params // {id: "xxx"}
      });
    }
  }

  this.route.snapshot.params["id"]
補(bǔ)助： 路由中的界面跳轉(zhuǎn)
  import {Router} from "@angular/router";
  
  constructor(public router: Router) {
  // 相當(dāng)于window.location.href，界面跳轉(zhuǎn)
    router.navigateByUrl('home');
  }