angular2 ng2-router 路由，嵌套路由详解

发布时间：2020-12-17 09:46:48 所属栏目：安全来源：网络整理

导读：实现ng2-router路由，嵌套路由首先配置angular2的时候router模块已经下载，只需要引入即可 import {RouterModule,Routes} from "@angular/router"; 我们要创建一个嵌套路由，所以需要创建以下文件 index.htmlapp.module.tsapp.component.tshome.component.t

实现ng2-router路由，嵌套路由

首先配置angular2的时候router模块已经下载，只需要引入即可
```
import {RouterModule,Routes} from "@angular/router";
```

我们要创建一个嵌套路由，所以需要创建以下文件

index.html
app.module.ts
app.component.ts
home.component.ts
list.component.ts
list-one.component.ts
list-two.component.ts

实现效果：
路由，单机“首页”加载home.component.ts
单机"列表“加载list.component.ts
列表中包含嵌套路由，tab页
单机"标签一"加载list-one.component.ts
单机"标签二"加载list-one.component.ts

开始配置

index.html界面配置两点

<head>标签中引入 <meta href="/" />
   引入路由代码显示标签 引入主组件标签 <my-app></my-app>

就这么简单， index.html界面配置完毕

app.module.ts界面配置路由

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

这样就完成了嵌套路由的配置

显示路由内容

app.component.ts

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

list.component.ts

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";
   }

list-one.component.ts

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

list-two.component.ts同理

获取路由参数id  (about:id) 添加模块 ActivatedRoute

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"}
           });
       }
   }
   ----------------------
   路由：
   {
       path: 'contacts-detail/:id',component: ContactsDetailComponent
   },跳转
   界面跳转：
   {{row.instid}}
   <a (click)="contactsCheck(row)"><i class="fa fa-delete"></i>审核</a>
   <a class="fa fa-editor" [routerLink]="['../contacts-detail/'+ row.instid]">查看详情</a>
   方法跳转：
   contactsCheck(value: any) {
   console.log(value);
   this.router.navigate(['./contacts/contacts-detail',value.instid]);
}
   ----------------------
   
   直接获取id值
   this.route.snapshot.params["id"]

补助： 路由中的界面跳转

import {Router} from "@angular/router";
    
    constructor(public router: Router) {
    // 相当于window.location.href，界面跳转
        router.navigateByUrl('home');
    }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!