填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

ActivatedRoute

允許訪問與某出口中載入的元件關聯路由資訊。用於遍歷 RouterState 樹並從節點提取資訊。

Provides access to information about a route associated with a component that is loaded in an outlet. Use to traverse the RouterState tree and extract information from nodes.

檢視"說明"...

      
      interface ActivatedRoute {
  snapshot: ActivatedRouteSnapshot
  url: Observable<UrlSegment[]>
  params: Observable<Params>
  queryParams: Observable<Params>
  fragment: Observable<string>
  data: Observable<Data>
  outlet: string
  component: Type<any> | string | null
  routeConfig: Route | null
  root: ActivatedRoute
  parent: ActivatedRoute | null
  firstChild: ActivatedRoute | null
  children: ActivatedRoute[]
  pathFromRoot: ActivatedRoute[]
  paramMap: Observable<ParamMap>
  queryParamMap: Observable<ParamMap>
  toString(): string
}
    

參見

說明

以下示例示範如何使用當前啟用的路由中的資訊來構造元件。

The following example shows how to construct a component using information from a currently activated route.

import {Component} from '@angular/core'; /* . . . */ import {ActivatedRoute} from '@angular/router'; import {Observable} from 'rxjs'; import {map} from 'rxjs/operators'; /* . . . */ @Component({ /* . . . */ }) export class ActivatedRouteComponent { constructor(route: ActivatedRoute) { const id: Observable<string> = route.params.pipe(map(p => p.id)); const url: Observable<string> = route.url.pipe(map(segments => segments.join(''))); // route.data includes both `data` and `resolve` const user = route.data.pipe(map(d => d.user)); } }
activated-route.component.ts
      
      import {Component} from '@angular/core';
/* . . . */
import {ActivatedRoute} from '@angular/router';
import {Observable} from 'rxjs';
import {map} from 'rxjs/operators';
/* . . . */

@Component({
/* . . . */
})
export class ActivatedRouteComponent {
  constructor(route: ActivatedRoute) {
    const id: Observable<string> = route.params.pipe(map(p => p.id));
    const url: Observable<string> = route.url.pipe(map(segments => segments.join('')));
    // route.data includes both `data` and `resolve`
    const user = route.data.pipe(map(d => d.user));
  }
}
    

屬性

屬性說明
snapshot: ActivatedRouteSnapshot

本路由此刻的快照

The current snapshot of this route

url: Observable<UrlSegment[]>

一個 Observable,表示與當前路由匹配的 URL 段。

An observable of the URL segments matched by this route.

params: Observable<Params>

一個 Observable,表示當前路由範圍內的矩陣引數(;)。

An observable of the matrix parameters scoped to this route.

queryParams: Observable<Params>

一個 Observable,表示所有路由共享的查詢引數(?)。

An observable of the query parameters shared by all the routes.

fragment: Observable<string>

一個 Observable,表示由所有路由共享的 URL 片段(#)。

An observable of the URL fragment shared by all the routes.

data: Observable<Data>

一個 Observable,表示該路由的靜態資料和解析出的資料。

An observable of the static and resolved data of this route.

outlet: string

本路由對應的出口名,是個常量

The outlet name of the route. It's a constant

component: Type<any> | string | null

本路由對應的元件,是個常量

The component of the route. It's a constant

routeConfig: Route | null唯讀

用於匹配本路由的配置項。

The configuration used to match this route.

root: ActivatedRoute唯讀

路由器狀態樹的根節點。

The root of the router state.

parent: ActivatedRoute | null唯讀

在路由器狀態樹中,當前路由的父路由。

The parent of this route in the router state tree.

firstChild: ActivatedRoute | null唯讀

在路由器狀態樹中,當前路由的第一個子路由。

The first child of this route in the router state tree.

children: ActivatedRoute[]唯讀

在路由器狀態樹中,當前路由的所有子路由。

The children of this route in the router state tree.

pathFromRoot: ActivatedRoute[]唯讀

在路由器狀態樹中從根節點開始到當前路由的完整路徑。

The path from the root of the router state tree to this route.

paramMap: Observable<ParamMap>唯讀

一個 Observable,其中包含特定於路由的必要和可選引數的對映。該對映支援從同一引數中檢索單個和多個值。

An Observable that contains a map of the required and optional parameters specific to the route. The map supports retrieving single and multiple values from the same parameter.

queryParamMap: Observable<ParamMap>唯讀

一個 Observable,其中包含可用於所有路由的查詢引數的對映。該對映支援從查詢引數中檢索單個和多個值。

An Observable that contains a map of the query parameters available to all routes. The map supports retrieving single and multiple values from the query parameter.

方法

toString(): string
      
      toString(): string
    
引數

沒有引數。

返回值

string