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

时间 2019-11-06

标签 angular2 angular ng2 router 路由嵌套详解栏目 AngularJS 繁體版

原文原文链接

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

首先配置angular2的时候router模块已经下载，只须要引入便可bootstrap
```
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

开始配置angular2

index.html界面配置两点app

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

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

* 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类样式-->
                    
                    <!--
                    [routerLinkActiveOptions]="{exact: true}" 彻底匹配路由，若是不添加这个，有可能 path="" 会一直添加激活的样式
                     -->
                    
                      <ul class="nav navbar-nav">
                        <li routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}"><a routerLink="home">首页</a></li>
                        <li routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}"><a routerLink="contact">联系咱们</a></li>
                        <li routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}"><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');
     }
 ``` 
 路由跳转默认以跟路由觉得起点条状，若是想以当前路由为起点，设置路由跳转，添加以下内容
 ```
    import {ActiveRouter, Router} from "router"
    constructor(public acitveRouter: ActiveRouter; public router: Router) {
}

     this.router.navigate(['userList'],{relativeTo: activeRouter}); 
    
    1.this.router.navigate(['user', 1]); 
    以根路由为起点跳转
    2.this.router.navigate(['user', 1],{relativeTo: activeRouter}); 
    默认值为根路由，设置后相对当前路由跳转，activeRouter是ActivatedRoute的实例，使用须要导入ActivatedRoute
    3.this.router.navigate(['user', 1],{ queryParams: { id: 1 } }); 
    路由中传参数 /user/1?id=1,查询参数，用于路由跳转，返回时候，带回去一些参数，搜索条件，分页，等等
    4.this.router.navigate(['view', 1], { preserveQueryParams: true }); 
    默认值为false，设为true，保留以前路由中的查询参数/user?id=1 to /view?id=1
    5.this.router.navigate(['user', 1],{ fragment: 'top' }); 
    路由中锚点跳转 /user/1#top
    6.this.router.navigate(['/view'], { preserveFragment: true }); 
    默认值为false，设为true，保留以前路由中的锚点/user/1#top to /view#top
    7.this.router.navigate(['/user',1], { skipLocationChange: true }); 
    默认值为false，设为true路由跳转时浏览器中的url会保持不变，可是传入的参数依然有效
    8.this.router.navigate(['/user',1], { replaceUrl: true }); 
    未设置时默认为true，设置为false路由不会进行跳转
    2、router.navigate刷新页面问题
    形成这个问题通常是由于咱们在<form>表单中使用<button>时忘记添加type属性，在表单中，若是忘记给按钮添加属性，会默认为submit
    ?
    1
    <button (click)="toDetail()">detail</button>
    ?
    1
    2
    3
    toDetail() {
     this._router.navigate(['/detail']);
    }
    解决方法： 
    1.添加type

    <button type="button" (click)="toDetail()">detail</button>
    2.click添加false

    <button (click)="toDetail();false">detail</button>
 ```