本文轉自：https://blog.csdn.net/kuangshp128/article/details/72626066

一、學單詞:angular路由中涉及到很多新單詞詞匯

二、實現一個簡單的路由

• 1、使用angular-cli創建一個帶路由的項目

• 2、手動配置路由文件

• 2.1使用nagular-cli創建一個帶路由的項目

  • ng new 項目名稱 --routing

  • 會多創建一個app-routing.module.ts文件代碼如下

    import { NgModule } from ‘@angular/core‘;
    import { Routes, RouterModule } from ‘@angular/router‘;
    
    const routes: Routes = [
      {
        path: ‘‘,
        children: []
      }
    ];
    
    @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule],
      providers: []
    })
    export class AppRoutingModule { }
     
    

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

• 2.2手動配置路由文件

  • 在app文件夾下面創建一個app.router.ts文件,基本結構代碼如下:

    /**
     * 定義路由跳轉頁面
     */
    //引入路由文件
    import {Routes, RouterModule} from "@angular/router";
    import {ModuleWithProviders} from "@angular/core";
    //引入掛載到路由上的組件
    ....
    //配置一個路由數組
    const rootRouterConfig : Routes = [
        {path:"路徑",component:組件名稱},
        {path:"page4",component:組件名稱,
            children:[
                {path:"路徑",component:...},
                {path:"路徑",component:...}
            ]
        }
    ]
    
    //對外暴漏出去
    export const rootRouterModule : ModuleWithProviders = RouterModule.forRoot(rootRouterConfig,{useHash:true});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

  • 在根模塊中

    //引入自己定義的路由
     import {rootRouterModule} from "./app.router";
     @NgModule({
      ....
       imports: [
         BrowserModule,
         FormsModule,
         HttpModule,
         rootRouterModule
       ],
       providers: [],
       bootstrap: [AppComponent]
     })
     export class AppModule { }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

三、一個簡單的路由案例代碼,使用了redirectTo做重定向

import { NgModule } from ‘@angular/core‘;
    import { Routes, RouterModule } from ‘@angular/router‘;
    import {Page1Component} from "app/page1/page1.component";
    import {Page2Component} from "app/page2/page2.component";

    const routes : Routes = [
      {path: ‘‘,redirectTo:"/page1",pathMatch:"full"},
      {path: ‘page1‘,component:Page1Component},
      {path: ‘page2‘,component:Page2Component},
    ];

    @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule],
      providers: []
    })
    export class AppRoutingModule { }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

<div class="container" style="margin-top:50px;">
    <div class="row">
        <div class="col-md-2">
            <ul class="list-group">
                <li class="list-group-item"><a [routerLink]="[‘/page1‘]">列表一</a></li>
                <li class="list-group-item"><a [routerLink]="[‘/page2‘]">列表二</a></li>
            </ul>
        </div>
        <div class="col-md-10" style="border:1px solid #ddd;padding-bottom:50px;padding-top:50px;">
            <router-outlet></router-outlet>
        </div>
    </div>
</div>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

四、添加404頁面

如果用戶輸入的url地址不正確，或者輸入的地址不存在跳轉到指定的路徑,使用”**”去匹配，路由會先從上面匹配，如果匹配不成功就會往下匹配

const routes : Routes = [
      {path: ‘‘,redirectTo:"/page1",pathMatch:"full"},
      {path: ‘page1‘,component:Page1Component},
      {path: ‘page2‘,component:Page2Component},
      {path: ‘**‘,component:Page404Component},
    ];

• 1
• 2
• 3
• 4
• 5
• 6

五、在TS文件中通過事件綁定跳轉頁面實現切換路由

在ts文件中實現路由的跳轉有兩種方式:本人建議用第一種，跟html頁面中保持一致

• 1

• 1、navigate裏面穿的一個數組
• 2、navigateByUrl裏面傳遞一個字符串

import { Component, OnInit } from ‘@angular/core‘;
    import {Router} from "@angular/router";

    @Component({
      selector: ‘app-page404‘,
      templateUrl: ‘./page404.component.html‘,
      styleUrls: [‘./page404.component.css‘]
    })
    export class Page404Component implements OnInit {

      constructor(private router:Router) { }

      ngOnInit() {
      }
      topage1(){
        this.router.navigate(["/page1"]);
      }
      topage2(){
        this.router.navigateByUrl("/page2");
      }
    }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21

六、實現選擇當前路由高亮顯示

• 1、在html頁面中添加routerLinkActive=”樣式名稱”

  <ul class="list-group">
      <li class="list-group-item"><a [routerLink]="[‘/page1‘]" routerLinkActive="active">列表一</a></li>
      <li class="list-group-item"><a [routerLink]="[‘/page2‘]" routerLinkActive="active">列表二</a></li>
  </ul>

  • 1
  • 2
  • 3
  • 4
• 2、在樣式表中定義active樣式

七、路由實現兩個組件之間切換傳遞參數，主要有兩種方式

• 1、path方法傳遞參數

• 2、query方法傳遞參數

  7.1 通過path方式傳遞參數

  • 1、配置傳遞path參數路由

 {path: ‘page2/:id1/:id2‘,component:Page2Component},

• 1

• 2、修改html代碼

<li class="list-group-item"><a [routerLink]="[‘/page2‘,1,2]" routerLinkActive="active">列表二</a></li>

• 1

• 3、修改Page2Component的ts文件

  import {Component, OnInit, OnDestroy} from ‘@angular/core‘;
  import {ActivatedRoute} from "@angular/router";
  export class Page2Component implements OnInit,OnDestroy {
        private id1 : number;
        private id2 : number;
        private sub:any;
        constructor(private _activatedRoute:ActivatedRoute) { }
  
        ngOnInit() {
          this.sub = this._activatedRoute.params.subscribe(params=>{
            console.log(`parames參數:${params}`)
            this.id1 = params["id1"];
            this.id2 = params["id2"];
            console.log(`獲取的參數id1:${this.id1},id2:${this.id2}`)
          })
        }
    //組件卸載的時候取消訂閱
        ngOnDestroy() : void {
          this.sub.unsubscribe();
        }
  }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

  7.2 通過navigate傳遞path參數

  this.router.navigate(["/page1",參數1,參數2]);
  //或者是這樣
  this.router.navigateByUrl("/page2/參數1/參數2");

  • 1
  • 2
  • 3

  7.3通過query傳遞參數

  • 1、修改html頁面添加傳遞參數

    <li class="list-group-item"><a [routerLink]="[‘/page1‘]" [queryParams]="{id:1,name:‘hello‘,age:20}" routerLinkActive="active">列表一</a></li>

    • 1

  • 2、修改ts代碼使用queryParams獲取傳遞參數

    import {Component, OnInit, OnDestroy} from ‘@angular/core‘;
    import {ActivatedRoute} from "@angular/router";
    
    @Component({
        selector: ‘app-page1‘,
        templateUrl: ‘./page1.component.html‘,
        styleUrls: [‘./page1.component.css‘]
    })
    export class Page1Component implements OnInit,OnDestroy {
        private sub:any;
        private id:number;
        private name:string;
        private age:number;
        constructor(private _activatedRoute:ActivatedRoute) { }
    
        ngOnInit() {
            this.sub = this._activatedRoute.queryParams.subscribe(queryParams=>{
                console.log("queryParams參數:",queryParams);
                this.id = Number.parseInt(queryParams["id"]);
                this.name = queryParams["name"];
                this.age = Number.parseInt(queryParams["age"]);
            })
        }
        ngOnDestroy(){
            this.sub.unsubscribe();
        }
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

  • 3、通過navigate傳遞query參數

    this.router.navigate(["/page1"],{queryParams:{"id":"10","name":"word","age":"30"}});

    • 1
  • 4、通過navigateByUrl傳遞query參數
    javascript
this.router.navigateByUrl("/page1?name=hello&id=2&age=20");


八、配置子路由

• 1、修改路由文件

  const routes : Routes = [
    {path: ‘‘,redirectTo:"/page1",pathMatch:"full"},
    {path: ‘page1‘,component:Page1Component},
    {path: ‘page2/:id1/:id2‘,component:Page2Component},
    {path: ‘page3‘,component:Page3Component,children:[
      {path:"",redirectTo:"page31",pathMatch:"full"},
      {path:"page31",component:Page31Component},
      {path:"page32",component:Page32Component},
    ]},
    {path: ‘**‘,component:Page404Component},
  ];

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

• 2、在page3的html頁面修改

  <button class="btn btn-danger" [routerLink]="[‘./page31‘]">page31</button>
  <button class="btn btn-danger" [routerLink]="[‘./page32‘]">page32</button>
  <router-outlet></router-outlet>

  • 1
  • 2
  • 3

九、輔助路由(兄弟路由)就是一個頁面中使用多個路由插座<router-outlet></<router-outlet>

使用方式:

• 1、在<router-outlet name="xxx"></<router-outlet>定義別名
• 2、在路由文件中增加一個outlet的屬性,如:{path: ‘page1‘,component:Page1Component,outlet="xxx"}

十、demo案例地址

[轉]Angular開發(十八)-路由的基本認識