Angular開發(十八)-路由的基本認識
阿新 • • 發佈:2018-12-12
一、學單詞:angular路由中涉及到很多新單詞詞彙
單詞 | 說明 | 使用場景 |
---|---|---|
Routes | 配置路由,儲存URL對應的元件,以及在哪個RouterOutlet中展現 | |
RouterOutlet | 在html中標記掛載路由的佔位容器 | |
Router | 在ts檔案中負責跳轉路由操作 | Router.navigate([“/xxx”]),Router.navigateByUrl(“/xxx”) |
routerLink | 在html中使用頁面跳轉 | <a [routerLink]="['/xx']" |
routerLinkActive | 表示當前啟用路由的樣式 | routerLinkActive=”active” |
ActivedRoute | 獲取當前啟用路由的引數, | 這個是一個類,要例項化,使用例項化後的物件.params,xx.queryParams |
redirectTo | 重定向 | redirectTo=”/路徑” |
useHash | 使用雜湊值展現 | {useHash:true} |
pathMatch | 完全匹配 | pathMatch:”full” |
二、實現一個簡單的路由
- 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 { }
-
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});
-
在根模組中
//引入自己定義的路由 import {rootRouterModule} from "./app.router"; @NgModule({ .... imports: [ BrowserModule, FormsModule, HttpModule, rootRouterModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
-
三、一個簡單的路由案例程式碼,使用了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 { }
<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>
四、新增404頁面
如果使用者輸入的
url
地址不正確,或者輸入的地址不存在跳轉到指定的路徑,使用”**”去匹配,路由會先從上面匹配,如果匹配不成功就會往下匹配
const routes : Routes = [
{path: '',redirectTo:"/page1",pathMatch:"full"},
{path: 'page1',component:Page1Component},
{path: 'page2',component:Page2Component},
{path: '**',component:Page404Component},
];
五、在TS
檔案中通過事件繫結跳轉頁面實現切換路由
在ts檔案中實現路由的跳轉有兩種方式:本人建議用第一種,跟html頁面中保持一致
- 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、在
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>
- 2、在樣式表中定義
active
樣式
七、路由實現兩個元件之間切換傳遞引數,主要有兩種方式
- 1、
path
方法傳遞引數 -
2、
query
方法傳遞引數7.1 通過
path
方式傳遞引數- 1、配置傳遞
path
引數路由
- 1、配置傳遞
{path: 'page2/:id1/:id2',component:Page2Component},
- 2、修改
html
程式碼
<li class="list-group-item"><a [routerLink]="['/page2',1,2]" routerLinkActive="active">列表二</a></li>
-
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(); } }
7.2 通過
navigate
傳遞path
引數this.router.navigate(["/page1",引數1,引數2]); //或者是這樣 this.router.navigateByUrl("/page2/引數1/引數2");
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(); } }
-
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}, ];
-
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>
九、輔助路由(兄弟路由)就是一個頁面中使用多個路由插座<router-outlet></<router-outlet>
使用方式:
- 1、在
<router-outlet name="xxx"></<router-outlet>
定義別名 - 2、在路由檔案中增加一個
outlet
的屬性,如:{path: 'page1',component:Page1Component,outlet="xxx"}