本節知識點：
- 靜態路由 get 傳參；
- 動態路由 get 傳參；
- js 實現內部路由跳轉；
爲了演示路由跳轉和傳值，繼續上次的【路由基本配置】繼續分解，創建的組件分別是【header】，【home】，【set】和【more】,目錄結構和依賴關係如下：
1.基礎準備：
【app-routing.module.ts】路由配置：
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
/* 引入組件 */
import { HomeComponent } from './components/home/home.component';
import { MoreComponent } from './components/more/more.component';
import { SetComponent } from './components/set/set.component';
/* 配置路由 */
const routes: Routes = [
{path:'', pathMatch:'full', redirectTo:'home'},
{path:'home',component: HomeComponent},
{path:'set',component: SetComponent},
{path:'more/:aid',component: MoreComponent} /* 動態路由配置 */
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
【app.component.html】掛載頭部組件和路由：
<app-header></app-header>
<router-outlet></router-outlet>
【styles.scss】全局樣式中編寫點簡單的樣式：
/* You can add global styles to this file, and also import other style files */
body{
margin: 0px;
padding: 0px;
background-color:#eff3f5;
}
.figure{
background-color: orange;
margin: 80px 0px 0px 0px;
padding: 0px;
height: auto;
}
2. 在頭部組件中準備菜單導航欄：
1.【header.component.html】導航欄佈局：
<header class="header">
<!-- <nav>
<ul>
<li>
<a title="home" target="_self" routerLink="/home" routerLinkActive="active">首頁</a>
</li>
<li>
<a title="set" target="_self" routerLink="/set" routerLinkActive="active">設置</a>
</li>
<li>
<a title="more" target="_self" routerLink="/more" routerLinkActive="active">更多</a>
</li>
</ul>
</nav> -->
<nav>
<ul>
<li>
<a href="#" title="home" target="_self" [routerLink]="['/home']" routerLinkActive="active">首頁</a>
</li>
<li>
<a href="#" title="set" target="_self" [routerLink]="['/set']" routerLinkActive="active">設置</a>
</li>
<li>
<a href="#" title="more" target="_self" [routerLink]="['/more',123]" routerLinkActive="active">更多</a>
</li>
</ul>
</nav>
</header>
2.【header.component.scss】編寫樣式：
.header{
/* 設置寬度高度背景顏色 */
height: auto; /*高度改爲自動高度*/
width:100%;
position: fixed; /*固定在頂部*/
top: 0;/*離頂部的距離爲0*/
margin: 0px;
background-color: rgba(117, 30, 95, 0.69);
& li{
list-style:none;
float: left;
text-align: center;
float:left; /* 使li內容橫向浮動，即橫向排列 */
margin-right:50px; /* 兩個li之間的距離*/
}
& li a{
/* 設置鏈接內容顯示的格式*/
display: block; /* 把鏈接顯示爲塊元素可使整個鏈接區域可點擊 */
color:white;
text-align: center;
padding: 14px 16px;
text-decoration: none; /* 去除下劃線 */
}
& li a:hover{
/* 鼠標選中時背景變爲黑色 */
background-color: #111;
}
}
3.在首頁組件中準備演示代碼：
1.【home.component.ts】ts中代碼：
import { Component, OnInit } from '@angular/core';
/* 1.引入Router，NavigationExtras */
import { Router, NavigationExtras } from '@angular/router';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
public techStack:string[] = [];
constructor(private outer:Router) { }
ngOnInit(): void {
this.techStack = ['.NET Core','C#','Angular','TypeScript','DataBase'];
}
/* 跳轉到more組件 */
goMore(): void{
//2.js路由跳轉,適合普通路由和動態路由, 只需引入 Router
this.outer.navigate(['/more','404']);
}
/* 跳轉到set組件 */
goSet(): void{
//3.get跳轉路由並傳值，需引入 Router,NavigationExtras
let navExtr:NavigationExtras = {
queryParams:{'id':'666','title':'xxx'},
fragment:'anchor'
};
this.outer.navigate(['/set'],navExtr);
}
}
2.【home.component.html】 頁面準備代碼：
<figure class="figure">
<h3>home works!</h3>
<ul>
<li>1.靜態路由get傳參</li>
<li *ngFor="let item of techStack; let i=index;">
<!-- 1.路由跳轉，queryParams裏面參數是object -->
<a [routerLink]="['/set']" routerLinkActive="active" [queryParams]="{'aid':i,'val':item}">
{{item}} -------------- {{i}}
</a>
</li>
</ul>
<hr/>
<ul>
<li>2.動態路由get傳參</li>
<li *ngFor="let item2 of techStack; let key=index;">
<a [routerLink]="['/more/',key]" routerLinkActive="active">
{{item2}} -------------- {{key}}
</a>
</li>
</ul>
<hr/>
<ul>
<li>3.js跳轉路由</li>
<li>
<button (click)="goMore()">js跳轉路由(普通)=》more</button>
</li>
<li>
<button (click)="goSet()">js跳轉路由(且傳值)=>set</button>
</li>
</ul>
</figure>
運行如下所示：【ng serve --open】
4.目標組件【set，more】接收傳過來的參數值：
注：爲了區分演示路由傳值，set組件接收靜態路由傳值，more組件接受動態路由傳值；
1.1【set.component.ts】實現代碼：
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router'; /* 1.1引入ActivatedRoute */
@Component({
selector: 'app-set',
templateUrl: './set.component.html',
styleUrls: ['./set.component.scss']
})
export class SetComponent implements OnInit {
/* DI註冊ActivatedRoute */
constructor(private route:ActivatedRoute) { }
ngOnInit(): void {
//1.2接收靜態路由get傳值
console.log(this.route.queryParams);
//route.queryParams 對象也是基於【Observable】
this.route.queryParams.subscribe((data:any)=>{
console.log(data);
});
}
}
1.2【set.component.html】實現代碼：
<figure class="figure">
<h3>set works!</h3>
<ul>
<li>我是【set】組件</li>
</ul>
</figure>
2.1【more.component.ts】實現代碼：
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router'; /* 2.1引入ActivatedRoute */
@Component({
selector: 'app-more',
templateUrl: './more.component.html',
styleUrls: ['./more.component.scss']
})
export class MoreComponent implements OnInit {
/* DI註冊ActivatedRoute */
constructor(private route:ActivatedRoute) { }
ngOnInit(): void {
//2.2接收動態路由get傳值
console.log(this.route.params);
//route.params 對象也是基於【Observable】
this.route.params.subscribe((data: any) => {
console.log(data);
});
}
}
2.2【more.component.html】實現代碼：
<figure class="figure">
<h3>more works!</h3>
<ul>
<li>我是【more】組件</li>
</ul>
</figure>
以上就完成本節知識點演示，實現【靜態路由】和【動態路由】的get傳參以及內部 js 路由跳轉。
5.總結
- 靜態路由 get 傳參；
//1.【app-routing.module.ts】文件
//1.1 引入組件：
import { SetComponent } from './components/set/set.component';
//1.2【Routes】路由配置：
/* 配置路由 */
{path:'set',component: SetComponent} //靜態路由配置
/*-------------------------------------------------------------------*/
//2.目標組件【set】接收參數傳值
//2.1引入ActivatedRoute
import { ActivatedRoute } from '@angular/router'; /* 引入ActivatedRoute */
//2.2構造函數DI註冊ActivatedRoute
constructor(private route:ActivatedRoute) { }
//2.3接收靜態路由get傳值
ngOnInit(): void {
//接收靜態路由get傳值
console.log(this.route.queryParams);
//route.queryParams 對象也是基於【Observable】
this.route.queryParams.subscribe((data:any)=>{
console.log(data);
});
}
- 動態路由 get 傳參；
//1.【app-routing.module.ts】文件
//1.1 引入組件：
import { MoreComponent } from './components/more/more.component';
//1.2【Routes】路由配置：
/* 配置路由 */
{path:'more/:aid',component: MoreComponent} //配置動態路由
/*-------------------------------------------------------------------*/
//2.目標組件【more】接收參數傳值
//2.1引入ActivatedRoute
import { ActivatedRoute } from '@angular/router'; /* 引入ActivatedRoute */
//2.2構造函數DI註冊ActivatedRoute
constructor(private route:ActivatedRoute) { }
//2.3接收動態路由get傳值
ngOnInit(): void {
//接收動態路由get傳值
console.log(this.route.params);
//route.params 對象也是基於【Observable】
this.route.params.subscribe((data: any) => {
console.log(data);
});
}
- js 實現內部路由跳轉；
//1.【app-routing.module.ts】文件，同上需要配置基本路由規則；
/*---------------------------------------------------------*/
//2.由於演示js路由跳轉是在home組件演示，所以在home組件實現以下步驟;
//2.1 引入所需路由模塊【Router，NavigationExtras】
import { Router, NavigationExtras } from '@angular/router';
//2.2 事件方法/函數實現跳轉：
/* 跳轉到more組件 */
goMore(): void{
//2.js路由跳轉,適合普通路由和動態路由, 只需引入 Router
this.outer.navigate(['/more','404']);
}
/* 跳轉到set組件 */
goSet(): void{
//3.get跳轉路由並傳值，需引入 Router,NavigationExtras
let navExtr:NavigationExtras = {
queryParams:{'id':'666','title':'xxx'},
fragment:'anchor'
};
this.outer.navigate(['/set'],navExtr);
}