angular 路由配置

1.路由配置

  • 創(chuàng)建兩個組件
  • 在app-routing.modult.ts中配一個空路由
const routes: Routes = [
    {path: '', component: HomeComponent}
];

在做路由配置時path屬性不要用’/'開頭良哲,因為angular本身會根據(jù)path的值做相應(yīng)的解析生成url铸题。

  • 在app.component.html中自動加入<router-outlet></router-outlet>
  • link訪問路由寫法:<a [routerLink]="['/']">主頁</a>
  • 通過調(diào)用方法訪問路由的寫法
<input type="button" value="我是詳情" (click)="toStockDetail()">

方法在app.component.ts中聲明:

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  constructor(private router: Router){
        
  }
  toStockDetail(){
    this.router.navigate(['/stock']);
  }
}
  • 當(dāng)用戶訪問的路由不存在時歼秽,頁面出錯筒繁,可以通過配置通配符解決問題。
    創(chuàng)建一個新的組件静檬,在路由配置中加{path: '**', component: Code404Component}

通配符寫在整個路由配置的最后面帘营。

2.數(shù)據(jù)傳遞

1.在查詢參數(shù)中傳遞數(shù)據(jù)
  • 路由路徑?參數(shù)名=參數(shù)值
  • /product?id=1&name=2 => ActivatedRoute.queryParams[id]
2.在路由路徑中傳遞數(shù)據(jù)
  • 指定路由路徑加參數(shù)名=>在實際路徑中攜帶的參數(shù)=>調(diào)用
  • {path:/product/:id}=>/product/1=>ActivatedRoute.params[id]
3.在路由配置中傳遞數(shù)據(jù)
  • 通過data參數(shù)定義靜態(tài)數(shù)據(jù)翩活,data本身為數(shù)組
  • {path: /product, component: ProductComponent, data:[{isProd:true}]}=>ActivatedRoute.data[0][isProd]
4.在url中傳遞參數(shù)
  • 修改路由配置中的path屬性阱洪,使其可以攜帶參數(shù)。
  • {path: 'stock/:id', component: ProductComponent, data:[{isPro:true}]}
  • 修改路由鏈接菠镇,讓鏈接在跳轉(zhuǎn)時攜帶參數(shù)冗荸。
  • <a [routerLink]= "['/stock',1]" >url獲取參數(shù)</a>

3.參數(shù)快照與參數(shù)訂閱

  • 參數(shù)快照:傳參方式與前面記錄相同。當(dāng)從主頁跳轉(zhuǎn)到詳情頁時利耍,詳情頁組件被創(chuàng)建蚌本,調(diào)用ngOnInit()方法,但是隘梨,當(dāng)詳情頁跳轉(zhuǎn)到詳情頁時(兩個傳參不同)程癌,組件不會被重新創(chuàng)建,ngOnInit()方法在同一組件路由到自身時不會被調(diào)用轴猎。
this.id = this.routerInfo.snapshot.params["id"]
  • 參數(shù)訂閱:訂閱方式改變參數(shù)值時嵌莉,每當(dāng)路由參數(shù)變換時,匿名的方法都會被調(diào)用一次捻脖。
this.routerInfo.params.subscribe((params:Params)=>this.id = params["id"])

4.重定向路由

{path: '', redirectTo: '/home',pathMatch:'full'}

pathMatch:'full'表示只有訪問路徑是精準(zhǔn)的空字符串時才跳轉(zhuǎn)到/home上锐峭。

{path: 'xx', redirectTo: '/home',pathMatch:'prefix'}

pathMatch:'prefix'表示路徑是以“xx”開頭就可跳轉(zhuǎn)到/home上。

5.子路由

在原有路由的基礎(chǔ)上加children屬性郎仆。將router-outlet聲明在哪個子路由就會顯示在哪兒只祠。由于聲明的是子路由,在訪問子路由時是不能以“/”開頭的扰肌,“/”開頭代表在主路由中找抛寝,子路由以“./”開頭。

  • 子路由可以一直嵌套
  • 路由信息和組件是分離的
{path: 'stock', component: StockComponent,
    children:[
      {path: '', component:BuyerListComponent},
      {path: 'seller/:id', component:SellerListComponent}
    ] 
 }

6.輔助路由

在每個頁面都有的一些側(cè)邊導(dǎo)航,會用到輔助路由盗舰。

  • 在組件模板上除了外晶府,還需要聲明一個帶name屬性的
  • 在路由配置中去配置aux可以顯示哪些組件。
{path: 'consult', component: ConsultComponent,outlet:"aux"}
  • 導(dǎo)航時指定在路由到某個地址時钻趋,輔助路由上需要顯示哪個組件川陆。
<a [routerLink]="[{outlets: {aux: 'consult'}}]">開始</a><br>

說明:主路由的內(nèi)容也可以控制,主路由沒有設(shè)置名字蛮位,它有一個默認(rèn)的關(guān)鍵字——primary较沪,在aux前面加上primary:'home',然后點擊失仁,主路由跳轉(zhuǎn)到home尸曼。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市萄焦,隨后出現(xiàn)的幾起案子控轿,更是在濱河造成了極大的恐慌,老刑警劉巖拂封,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件茬射,死亡現(xiàn)場離奇詭異,居然都是意外死亡冒签,警方通過查閱死者的電腦和手機在抛,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來镣衡,“玉大人霜定,你說我怎么就攤上這事±扰福” “怎么了望浩?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長惰说。 經(jīng)常有香客問我磨德,道長,這世上最難降的妖魔是什么吆视? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任典挑,我火速辦了婚禮,結(jié)果婚禮上啦吧,老公的妹妹穿的比我還像新娘您觉。我一直安慰自己,他們只是感情好授滓,可當(dāng)我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布琳水。 她就那樣靜靜地躺著肆糕,像睡著了一般。 火紅的嫁衣襯著肌膚如雪在孝。 梳的紋絲不亂的頭發(fā)上诚啃,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天,我揣著相機與錄音私沮,去河邊找鬼始赎。 笑死,一個胖子當(dāng)著我的面吹牛仔燕,可吹牛的內(nèi)容都是我干的造垛。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼涨享,長吁一口氣:“原來是場噩夢啊……” “哼筋搏!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起厕隧,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎俄周,沒想到半個月后吁讨,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡峦朗,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年建丧,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片波势。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡翎朱,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出尺铣,到底是詐尸還是另有隱情拴曲,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布凛忿,位于F島的核電站澈灼,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏店溢。R本人自食惡果不足惜叁熔,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望床牧。 院中可真熱鬧荣回,春花似錦、人聲如沸戈咳。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至糯累,卻和暖如春算利,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背泳姐。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工效拭, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人胖秒。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓缎患,卻偏偏與公主長得像,于是被迫代替她去往敵國和親阎肝。 傳聞我的和親對象是個殘疾皇子挤渔,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容