Angular中的ActivatedRoute和Router原理解釋

更新時間：2023年04月16日 16:31:17 作者：Data_Adventure

這篇文章主要為大家介紹了Angular中的ActivatedRoute和Router原理解釋，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

Angular中的ActivatedRoute和Router解釋

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

ActivatedRoute

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

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

例如，對于這個路由：

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

通過獲取ActivatedRoute，我們可以輕松地訪問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通過注入該服務(wù)作為構(gòu)造函數(shù)的參數(shù)而獲取。接下來，我們只需使用快照對象（即this.route.snapshot）就可以快速訪問路由參數(shù)。要獲取參數(shù)的特定值，可以使用get方法訪問params屬性，該方法采用一個字符串參數(shù)并返回一個字符串：

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

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

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

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

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

Router

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

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

基本導(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 { }

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

然后，我們在模板或組件類中安排具有相應(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)航?，F(xiàn)在，當用戶點擊鏈接時，路由器會根據(jù)路徑加載相應(yīng)的組件并在指令的位置動態(tài)渲染該組件。

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

您可能感興趣的文章: