路由：根據(jù)不同地址加載不同組件厦凤，實(shí)現(xiàn)單頁(yè)面應(yīng)用
# 1 路由基礎(chǔ)知識(shí) =================
在angular中主要提供了下面5個(gè)對(duì)象來(lái)處理應(yīng)用中路由相關(guān)的功能：
Routes: ? ? ? ?路由配置，保存著哪個(gè)URL對(duì)應(yīng)展示哪個(gè)組件逮走，以及在哪個(gè)RouterOutlet中展示組件
RouterOutlet：在Html中標(biāo)記路由內(nèi)容呈現(xiàn)位置的占位符指令
Router： ? ? ? ? ?【控制器中】負(fù)責(zé)在運(yùn)行時(shí)執(zhí)行路由的對(duì)象，可以通過(guò)調(diào)用其navigate()和navigateByUrl()方法來(lái)導(dǎo)航到一個(gè)指定的路由
RouterLink： ? 【html模板中a】在Html中聲明路由導(dǎo)航用的指令
ActivatedRoute：當(dāng)前激活的路由對(duì)象悟耘，保存著當(dāng)前路由的信息欠拾，如路由地址，路由參數(shù)等 ? ? ? ? ? ? ? ? ? ? ?
ng new router --routing ? ? ? ? 創(chuàng)建路由項(xiàng)目
Q1:Routes
當(dāng)我們使用routing參數(shù)生成項(xiàng)目時(shí) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
?在app目錄下會(huì)多生成一個(gè)app-routing.module.ts? 描述當(dāng)前應(yīng)用的路由配置 ? ? ? ? ? ?
主模塊app-module.ts中元數(shù)據(jù)imports中會(huì)導(dǎo)入新生成的AppRoutingModule
ng g component home ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
ng g component product ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
ng g component code404 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
? 生成主頁(yè) 產(chǎn)品 404組件
路由配置：
《app-routing.module.ts》：
import { NgModule } from '@angular/core'; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
?import { RouterModule, Routes } from '@angular/router'; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
?import {HomeComponent} from "./home/home.component"; ? ? ? ? ? ? ? ? ?
?import {ProductComponent} from "./product/product.component"; ? ? ? ?
import {Code404Component} from "./code404/code404.component";
const routes:Routes = [ ? ? ?//注：path不能用\開(kāi)頭 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ?{path: '',component: HomeComponent}, ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ??{path: 'product',component: ProductComponent}衩茸，
? ??{path:'**',component:Code404Component} ? ??//放在路由配置的最后面 ?
];
@NgModule({ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
imports: [ RouterModule.forRoot(appRoutes) ], ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
exports: [ RouterModule ], ? ? ?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
?providers: [] ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
})
export class AppRoutingModule { } ? ? ? //暴露模塊
《app.module.ts》:
import { AppRoutingModule } from './app-routing.module';
... ? ...
imports: [
? ? BrowserModule,
? ? AppRoutingModule ? ? ?//注冊(cè)路由模塊
]
Q2:RouterOutlet
當(dāng)我們使用routing參數(shù)生成項(xiàng)目時(shí) ?app.component.html中會(huì)生成插座指示當(dāng)前導(dǎo)航到某個(gè)路由的時(shí)候?qū)?yīng)組件顯示的位置[插座后面]
Q3：RouterLink
《app.component.html》：
<a [routerLink]="['/]" ? routerLinkActive="active">主頁(yè)</a>
<a ?[routerLink]> = "['/product']">商品詳情</a> ? ? ?
<router-outlet></router-outlet>
【routerkinkactive：選中路由加載的class】
.active{ ?color: red; } ? // 配置選中的樣式
說(shuō)明：routerLink的參數(shù)是一個(gè)數(shù)組：有時(shí)需要在路由的時(shí)候傳遞一些參數(shù)芹血，需要在數(shù)組中寫(xiě)參數(shù)的值
Q4：Router ? ?-- js跳轉(zhuǎn)
《app.component.ts》：
import { Component } from '@angular/core'; ? ?
@Component({ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ?selector: 'app-root', ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? templateUrl: './app.component.html', ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ?styleUrls: ['./app.component.css'] ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ?})
export class AppComponent { ? ?
? ? ? ? ? ?title = 'app';
? ? ? ?? constructor(private router:Router) { ? ?} ? ?
? ? ? ? ? ?toProductDetails() { ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?this.router.navigate(['/product']) ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? //? this.router.navigate(['/product' , 2]) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? }? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? }
Q5：ActivatedRoute
# 2 路由時(shí)傳遞數(shù)據(jù) ===============
E1 : 在查詢參數(shù)中傳遞數(shù)據(jù)：
/product?id=1&name=2? ? =>? ActivatedRoute.queryParams[id]
E2 : 在路由路徑中傳遞數(shù)據(jù)：
{path:/product/:id}? ? =>? /product/1? ? =>? ActivatedRoute.params[id]
E3 : 在路由配置中傳遞數(shù)據(jù)：
{path:/product,component:ProductComponent, data[{isProd:true}]}? =>? ActivatedRoute.data[0][isProd]
導(dǎo)航到商品詳情頁(yè)的時(shí)候需要傳商品id給商品詳情組件：
E1:
《app.component.html》：【傳】
<a [routerLink] = "['/']">主頁(yè)</a>
?<a [routerLink] = "['/product']" ? [queryParams] = "{id:1}">商品詳情</a> ? ?
?<input type="button" value="商品詳情" (click)="toProductDetails()"> ?
? <router-outlet></router-outlet> ?
《product.component.ts》：【接】
import { Component ,OnInit} from '@angular/core';?
?import? {ActivatedRoute} from "@angular/router"; ? ?
? @Component({? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? selector: 'app-product', ? ? ? ?
? ? ? ? ? ? ? ? ? ? templateUrl: './product.component.html', ?
? ? ? ? ? ? ? ? ? ? ?styleUrls: ['./product.component.css'] ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? })
export class ProductComponent implements OnInit {
? ? ? ? private productId:number; ?
? ? ? ?constructor(private routeInfo: ActivateRoute) { } ? ?
? ? ? ?ngOnInit() { ? ? ? ? ? ? ?
? ? ? ? ? ? this.productId = this.routeInfo.snapshot.queryParams["id"]; ? ? ?
? ? ? ? ? ? } ?
?}
《product.component.html》：
<p>商品ID是：{{productId}}</p>
E2:
《app-routing.module.ts》：
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';?
import {HomeComponent} from "./home/home.component";?
?import {ProductComponent} from "./product/product.component";?
?import {Code404Component} from "./code404/code404.component";
const routes:Routes = [ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? {path: '',component: HomeComponent}, ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ?{path: 'product/:id',component: ProductComponent}， ? ? ? ? ?
? ? ? ? {path:'**',component:Code404Component} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
?];
@NgModule({ ?imports: [ RouterModule.forRoot(appRoutes) ], ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? exports: [ RouterModule ], ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? providers: [] ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?})
export class AppRoutingModule { }
《app.component.html》:
<a [routerLink] = "['/']">主頁(yè)</a>?
? <a [routerLink] = "['/product' , 1]">商品詳情</a>? ?
? ?<input type="button" value="商品詳情" (click)="toProductDetails()">? ?
?<router-outlet></router-outlet>
《product.component.ts》:
import { Component ,OnInit} from '@angular/core'; ?
import ?{ActivatedRoute} from "@angular/router"; ? ?
? @Component({ ? ?
? ? ? selector: 'app-product', ?
? ? ? ? templateUrl: './product.component.html', ? ?
? ? ? ? ?styleUrls: ['./product.component.css'] ? ? ?
? })
export class ProductComponent implements OnInit { ? ?
? ? ? ? ? private productId:number; ? ?
? ? ? ? constructor(private routeInfo: ActivateRoute) { } ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ngOnInit() {? ?
? ? ? ? ? ? ?this.routeInfo.params.subscribe((params:Params) => this.productId = params ["id"]); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? } ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? }
從組件A 路由到組件B時(shí)楞慈，B組件會(huì)被創(chuàng)建祟牲，它的constructor方法會(huì)被調(diào)用，它的ngOnInit方法會(huì)被調(diào)用一次
但是如果從組件B到組件B 抖部，ngOnInit方法不會(huì)再次創(chuàng)建说贝，所以productId屬性保持著第一次創(chuàng)建時(shí)賦予的值
解決方案：?
** ? ?參數(shù)訂閱
this.routeInfo.params.subscribe((params:Params) => this.productId = params ["id"]):? ? ? ? ? ? ? ? ? ? ? + subscribe 訂閱
+ Params ?類(lèi)型
+ 訂閱之后聲明一個(gè)匿名函數(shù)來(lái)處理傳進(jìn)的參數(shù)params， 從參數(shù)中取出id賦給本地的productId
** ?參數(shù)快照：
ngOnInit() { ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.productId = this.routeInfo.snapshot.queryParams["id"]; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}
小結(jié)：如果確定不會(huì)由組件A 路由到組件A 可使用參數(shù)快照慎颗，反之乡恕，使用參數(shù)訂閱
