Angular中的ActivatedRoute和Router解釋

在Angular中，ActivatedRoute和Router是兩個(gè)核心的路由服務(wù)。他們都提供可以用來(lái)檢查和操作當(dāng)前頁(yè)面路由信息的方法和屬性。

ActivatedRoute

ActivatedRoute是一個(gè)保存關(guān)于當(dāng)前路由狀態(tài)（如路由參數(shù)、查詢參數(shù)以及其他數(shù)據(jù)）的對(duì)象。 它可以讓開(kāi)發(fā)人員從路由器中訪問(wèn)路由參數(shù)和查詢參數(shù)。

ActivatedRoute是路由事件數(shù)據(jù)的載體。 這包括在導(dǎo)航期間收集的靜態(tài)和動(dòng)態(tài)段以及查詢參數(shù)、Fragment等等。

例如，對(duì)于這個(gè)路由：

{ path: 'product/:id', component: ProductDetailComponent }

通過(guò)獲取ActivatedRoute，我們可以輕松地訪問(wèn)id值：

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-product-detail',
  template: 'Product Details Component'
})
export class ProductDetailComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}
  ngOnInit() {
    const id = +this.route.snapshot.paramMap.get('id');
    // ...
  }
}

在上面的代碼示例中，ActivatedRoute通過(guò)注入該服務(wù)作為構(gòu)造函數(shù)的參數(shù)而獲取。接下來(lái)，我們只需使用快照對(duì)象（即this.route.snapshot）就可以快速訪問(wèn)路由參數(shù)。要獲取參數(shù)的特定值，可以使用get方法訪問(wèn)params屬性，該方法采用一個(gè)字符串參數(shù)并返回一個(gè)字符串：

const id = +this.route.snapshot.paramMap.get('id');

這里的加號(hào)意味著我們將結(jié)果轉(zhuǎn)換為數(shù)字類型。

另一種訪問(wèn)路由參數(shù)的方法是通過(guò)訂閱paramMap可觀察值。subscribe`方法定義給observable帶來(lái)副作用，就像任何** RxJS **observable一樣:

this.route.paramMap.subscribe(params => {
  const id = +params.get('id');
  // ...
});

這種方式允許動(dòng)態(tài)更改URL。（你的組件不需要重新創(chuàng)建。）

Router

Router通過(guò)向前和向后導(dǎo)航和路由裝置提供了一種明顯且簡(jiǎn)單的編程API，同時(shí)仍然保留完全配置的強(qiáng)大能力。

路由器是一個(gè)抽象的概念，它用于選擇輸入U(xiǎn)RL，并將其轉(zhuǎn)換為經(jīng)過(guò)測(cè)試的規(guī)則來(lái)獲取特定組件。 在Angular中，路由器是NgModule中的引導(dǎo)項(xiàng)之一。 路由器設(shè)置可能看起來(lái)非常困難，但是一旦了解了基本情況，它們就會(huì)感到自然。

基本導(dǎo)航

首先，我們根據(jù)常規(guī)用法配置Routes數(shù)組：

// app-routing.module.ts file
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProductListComponent } from './product-list/product-list.component';
import { ProductDetailComponent } from './product-detail/product-detail.component';
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'products', component: ProductListComponent },
  { path: 'products/:id', component: ProductDetailComponent }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

我們?cè)O(shè)定了三個(gè)路由：空路徑(主頁(yè))，產(chǎn)品列表和特定ID的產(chǎn)品。 每個(gè)路徑都與對(duì)應(yīng)的組件相關(guān)聯(lián)。

然后，我們?cè)谀０寤蚪M件類中安排具有相應(yīng)路由聲明的鏈接：

<!-- home.component.html -->
<a routerLink="/">Home</a>
<a routerLink="/products">Product List</a>
<!-- product-list.component.html -->
<ul>
    <li *ngFor="let product of products">
        <a [routerLink]="['/products', product.id]">{{ product.name }}</a>
    </li>
</ul>
<!-- product-detail.component.html -->
<h2>Product Detail</h2>
<p>{{ product }}</p>

在上面的所有代碼示例中，我們使用了routerLink指令完成路由導(dǎo)航。現(xiàn)在，當(dāng)用戶點(diǎn)擊鏈接時(shí)，路由器會(huì)根據(jù)路徑加載相應(yīng)的組件并在指令的位置動(dòng)態(tài)渲染該組件。

以上就是Angular中的ActivatedRoute和Router原理詳解的詳細(xì)內(nèi)容，更多關(guān)于Angular ActivatedRoute Router的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論