详解angular2实现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";  // 表单 双向数据绑定  import {FormsModule} from "@angular/forms";  import {AppComponent} from "./app.component";  // List中包含两个tab子组件  import {ListComponent} from "./list.component";  import {ListOneComponent} from "./list-one.component";  import {ListTwoComponent} from "./list-two.component";  import {HomeComponent} from "./home.component";  // 定义路由, bootstrap默认加载组件就是AppComponent,所以他就是主页导航页,然后添加的路由都在他的模板中。  // 可以所有代码写在NgModule中, 也可以这样自定义常量,然后使用。  // 定义常量 嵌套自路由  const appChildRoutes: Routes = [   {path: "one", component: ListOneComponent},   {path: "two", component: ListTwoComponent},   // 如果地址栏中输入没有定义的路由就跳转到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样式的导航，routerLinkActive，表示路由激活的时候，谈价active类样式-->         <ul class="nav navbar-nav">          <li routerLinkActive="active"><a routerLink="home">首页</a></li>          <li routerLinkActive="active"><a routerLink="contact">联系我们</a></li>          <li routerLinkActive="active"><a routerLink="product">产品</a></li>         </ul>         <!--路由内容显示区域-->         <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>        <!-- 路由内容显示标签 -->        <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"]补助： 路由中的界面跳转  import {Router} from "@angular/router";    constructor(public router: Router) {  // 相当于window.location.href，界面跳转    router.navigateByUrl('home');  }