ng4.x 路由配置及數(shù)據(jù)傳遞

路由：根據(jù)不同地址加載不同組件，實(shí)現(xiàn)單頁面應(yīng)用

# 1 路由基礎(chǔ)知識(shí) =================

在angular中主要提供了下面5個(gè)對(duì)象來處理應(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ì)象，可以通過調(diào)用其navigate()和navigateByUrl()方法來導(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 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

? 生成主頁 產(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不能用\開頭 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

? ? ?{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">主頁</a>

<a ?[routerLink]> = "['/product']">商品詳情</a> ? ? ?

<router-outlet></router-outlet>


【routerkinkactive：選中路由加載的class】

.active{ ?color: red; } ? // 配置選中的樣式

說明：routerLink的參數(shù)是一個(gè)數(shù)組：有時(shí)需要在路由的時(shí)候傳遞一些參數(shù)，需要在數(shù)組中寫參數(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)航到商品詳情頁的時(shí)候需要傳商品id給商品詳情組件：

E1:

《app.component.html》：【傳】

<a [routerLink] = "['/']">主頁</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] = "['/']">主頁</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 ?類型

+ 訂閱之后聲明一個(gè)匿名函數(shù)來處理傳進(jìn)的參數(shù)params， 從參數(shù)中取出id賦給本地的productId

** ?參數(shù)快照：

ngOnInit() { ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.productId = this.routeInfo.snapshot.queryParams["id"]; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}

小結(jié)：如果確定不會(huì)由組件A 路由到組件A 可使用參數(shù)快照，反之，使用參數(shù)訂閱

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • # 1 ：重定向路由 {path: '',redirectTo:'home', parthMatch:'full'...
    __凌閱讀 760評(píng)論 0贊 0
  • 一、安裝最新版本的 nodejs 注意：請(qǐng)先在終端/控制臺(tái)窗口中運(yùn)行命令 node -v 和 npm -v， 來驗(yàn)...
    liuguangsen閱讀 2,279評(píng)論 0贊 1
  • 第一節(jié)：初識(shí)Angular-CLI第二節(jié)：登錄組件的構(gòu)建第三節(jié)：建立一個(gè)待辦事項(xiàng)應(yīng)用第四節(jié)：進(jìn)化！模塊化你的應(yīng)用第...
    接灰的電子產(chǎn)品閱讀 13,782評(píng)論 64贊 25
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 136,506評(píng)論 19贊 139
  • 我剛到德國的時(shí)候，對(duì)于德國商店的售貨員那種冷淡的態(tài)度，很不習(xí)慣。進(jìn)到一家商店，通常售貨員并不怎么搭理你。德國的商店...
    書香云舍閱讀 1,468評(píng)論 9贊 24

友情鏈接更多精彩內(nèi)容