Angular中的ActivatedRoute和Router原理是什么

這篇“Angular中的ActivatedRoute和Router原理是什么”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Angular中的ActivatedRoute和Router原理是什么”文章吧。

Angular中的ActivatedRoute和Router解釋

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

ActivatedRoute

ActivatedRoute是一個保存關于當前路由狀態（如路由參數、查詢參數以及其他數據）的對象。 它可以讓開發人員從路由器中訪問路由參數和查詢參數。

ActivatedRoute是路由事件數據的載體。 這包括在導航期間收集的靜態和動態段以及查詢參數、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通過注入該服務作為構造函數的參數而獲取。接下來，我們只需使用快照對象（即this.route.snapshot）就可以快速訪問路由參數。要獲取參數的特定值，可以使用get方法訪問params屬性，該方法采用一個字符串參數并返回一個字符串：

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

這里的加號意味著我們將結果轉換為數字類型。

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

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

這種方式允許動態更改URL。（你的組件不需要重新創建。）

Router

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

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

基本導航

首先，我們根據常規用法配置Routes數組：

// 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 { }

我們設定了三個路由：空路徑(主頁)，產品列表和特定ID的產品。 每個路徑都與對應的組件相關聯。

然后，我們在模板或組件類中安排具有相應路由聲明的鏈接：

<!-- 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 -->
<h3>Product Detail</h3>
<p>{{ product }}</p>

在上面的所有代碼示例中，我們使用了routerLink指令完成路由導航。現在，當用戶點擊鏈接時，路由器會根據路徑加載相應的組件并在指令的位置動態渲染該組件。

以上就是關于“Angular中的ActivatedRoute和Router原理是什么”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。