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

Route

定義單個路由的配置物件。在 Routes 陣列中收集了一組路由定義,以用作 Router 的配置。路由器會嘗試使用此物件中定義的配置選項,將給定 URL 段與每個路由進行匹配。

A configuration object that defines a single route. A set of routes are collected in a Routes array to define a Router configuration. The router attempts to match segments of a given URL against each route, using the configuration options defined in this object.

檢視"說明"...

      
      interface Route {
  path?: string
  pathMatch?: string
  matcher?: UrlMatcher
  component?: Type<any>
  redirectTo?: string
  outlet?: string
  canActivate?: any[]
  canActivateChild?: any[]
  canDeactivate?: any[]
  canLoad?: any[]
  data?: Data
  resolve?: ResolveData
  children?: Routes
  loadChildren?: LoadChildren
  runGuardsAndResolvers?: RunGuardsAndResolvers
}
    

說明

支援靜態、引數化、重新導向和萬用字元路由,以及自訂路由資料和解析方法。

Supports static, parameterized, redirect, and wildcard routes, as well as custom route data and resolve methods.

欲知詳情,請參閱《路由指南》

For detailed usage information, see the Routing Guide.

Further information available in the Usage Notes...

屬性

屬性說明
path?: string

匹配的路徑。不能與自訂 matcher 功能一起使用。使用路由器匹配表示法的 URL 字串。可以是與任何 URL 匹配的萬用字元(**)(請參閱下面的使用說明)。預設值為 “/”(根路徑)。

The path to match against. Cannot be used together with a custom matcher function. A URL string that uses router matching notation. Can be a wild card (**) that matches any URL (see Usage Notes below). Default is "/" (the root path).

pathMatch?: string

路徑匹配策略,為 “prefix” 或 “full” 之一。預設為“prefix”。

The path-matching strategy, one of 'prefix' or 'full'. Default is 'prefix'.

預設情況下,路由器會從左邊開始檢查 URL 中的各個元素,以檢視此 URL 是否匹配給定的路徑,遇到任何一個匹配的,就停止。比如,'/team/11/user' 能匹配 'team/:id'。

By default, the router checks URL elements from the left to see if the URL matches a given path, and stops when there is a match. For example, '/team/11/user' matches 'team/:id'.

路徑匹配策略 “full” 表示與整個 URL 匹配。重新導向空路徑路由時,執行此操作很重要。否則,因為空路徑是任何 URL 的字首,所以路由器即使在導航到重新導向目標時也會進行重新導向,從而造成無限迴圈。

The path-match strategy 'full' matches against the entire URL. It is important to do this when redirecting empty-path routes. Otherwise, because an empty path is a prefix of any URL, the router would apply the redirect even when navigating to the redirect destination, creating an endless loop.

matcher?: UrlMatcher

自訂 URL 匹配功能。不能與 path 一起使用。

A custom URL-matching function. Cannot be used together with path.

component?: Type<any>

路徑匹配時實例化的元件。如果要由其子路由指定元件,則可以為空。

The component to instantiate when the path matches. Can be empty if child routes specify components.

redirectTo?: string

路徑匹配時重新導向到的 URL。如果 URL 以斜槓(/)開頭,則為絕對值,否則相對於當前路徑 URL。如果不存在,則路由器不會重新導向。

A URL to redirect to when the path matches. Absolute if the URL begins with a slash (/), otherwise relative to the path URL. When not present, router does not redirect.

outlet?: string

RouterOutlet 物件的名字,當路徑匹配時會把元件放置在其中。

Name of a RouterOutlet object where the component can be placed when the path matches.

canActivate?: any[]

一組依賴項注入令牌,用於查詢 CanActivate() 處理器,以確定是否允許當前使用者啟用該元件。預設情況下,任何使用者都可以啟用。

An array of dependency-injection tokens used to look up CanActivate() handlers, in order to determine if the current user is allowed to activate the component. By default, any user can activate.

canActivateChild?: any[]

DI 令牌陣列,用於查詢 CanActivateChild() 處理器,以確定是否允許當前使用者啟用元件的子級。預設情況下,任何使用者都可以啟用子路由。

An array of DI tokens used to look up CanActivateChild() handlers, in order to determine if the current user is allowed to activate a child of the component. By default, any user can activate a child.

canDeactivate?: any[]

DI 令牌陣列,用於查詢 CanDeactivate() 處理器,以確定是否允許當前使用者停用該元件。預設情況下,任何使用者都可以停用。

An array of DI tokens used to look up CanDeactivate() handlers, in order to determine if the current user is allowed to deactivate the component. By default, any user can deactivate.

canLoad?: any[]

DI 令牌陣列,用於查詢 CanLoad() 處理器,以確定是否允許當前使用者載入元件。預設情況下,任何使用者都可以載入。

An array of DI tokens used to look up CanLoad() handlers, in order to determine if the current user is allowed to load the component. By default, any user can load.

data?: Data

ActivatedRoute 提供給元件的由開發人員定義的額外資料。預設情況下,不傳遞任何額外資料。

Additional developer-defined data provided to the component via ActivatedRoute. By default, no additional data is passed.

resolve?: ResolveData

DI 令牌的對映,用於查詢資料解析器。請參閱 Resolve

A map of DI tokens used to look up data resolvers. See Resolve.

children?: Routes

一個子 Route 物件陣列,用於指定巢狀路由配置。

An array of child Route objects that specifies a nested route configuration.

loadChildren?: LoadChildren

一個物件,指定要延遲載入的子路由。

An object specifying lazy-loaded child routes.

runGuardsAndResolvers?: RunGuardsAndResolvers

定義何時執行守衛(guard)和解析器(resolver)。為下列值之一

Defines when guards and resolvers will be run. One of

  • paramsOrQueryParamsChange :當查詢引數發生變化時執行。

    paramsOrQueryParamsChange : Run when query parameters change.

  • always :在每次執行時執行。預設情況下,僅當路由的矩陣引數發生更改時,守衛和解析器才會執行。

    always : Run on every execution. By default, guards and resolvers run only when the matrix parameters of the route change.

使用說明

簡單配置

Simple Configuration

以下路由指定在導航到 /team/11/user/bob 時,路由器會在其中建立帶有 'User' 子元件的 'Team' 元件。

The following route specifies that when navigating to, for example, /team/11/user/bob, the router creates the 'Team' component with the 'User' child component in it.

      
      [{
  path: 'team/:id',
 component: Team,
  children: [{
    path: 'user/:name',
    component: User
  }]
}]
    

多重出口

Multiple Outlets

以下路由建立具有多個出口的兄弟元件。當導航到 /team/11(aux:chat/jim) 時,路由器會在 'Chat' 元件旁邊建立 'Team' 元件。 'Chat' 元件放置在 'aux' 出口中。

The following route creates sibling components with multiple outlets. When navigating to /team/11(aux:chat/jim), the router creates the 'Team' component next to the 'Chat' component. The 'Chat' component is placed into the 'aux' outlet.

      
      [{
  path: 'team/:id',
  component: Team
}, {
  path: 'chat/:user',
  component: Chat
  outlet: 'aux'
}]
    

萬用字元

Wild Cards

以下路由使用萬用字元表示法來指定始終實例化的元件,無論你導航到何處。

The following route uses wild-card notation to specify a component that is always instantiated regardless of where you navigate to.

      
      [{
  path: '**',
  component: WildcardComponent
}]
    

重新導向

Redirects

當尋找子路徑時,以下路由使用 redirectTo 屬性忽略給定 URL 的一部分。

The following route uses the redirectTo property to ignore a segment of a given URL when looking for a child path.

導航到 '/team/11/legacy/user/jim' 時,路由器將 URL 段 '/team/11/legacy/user/jim' 更改為 '/team/11/user/jim',然後實例化 Team 元件以及其中的 User 子元件。

When navigating to '/team/11/legacy/user/jim', the router changes the URL segment '/team/11/legacy/user/jim' to '/team/11/user/jim', and then instantiates the Team component with the User child component in it.

      
      [{
  path: 'team/:id',
  component: Team,
  children: [{
    path: 'legacy/user/:name',
    redirectTo: 'user/:name'
  }, {
    path: 'user/:name',
    component: User
  }]
}]
    

重新導向路徑可以是相對的(如本示例所示),也可以是絕對的。 redirectTo 值更改為絕對 URL 段 '/user/:name',則結果 URL 也是絕對 URL,'/user/jim'。

The redirect path can be relative, as shown in this example, or absolute. If we change the redirectTo value in the example to the absolute URL segment '/user/:name', the result URL is also absolute, '/user/jim'.

空路徑

Empty Path

空路徑路由可用來實例化一些不"消費"任何 url 區段的元件。

Empty-path route configurations can be used to instantiate components that do not 'consume' any URL segments.

在下列配置中,當導航到 /team/11 時,路由器會實例化 'AllUsers' 元件。

In the following configuration, when navigating to /team/11, the router instantiates the 'AllUsers' component.

      
      [{
  path: 'team/:id',
  component: Team,
  children: [{
    path: '',
    component: AllUsers
  }, {
    path: 'user/:name',
    component: User
  }]
}]
    

空路徑路由可以有子路由。在以下示例中,當導航到 /team/11/user/jim 時,路由器會實例化帶有使用者元件的包裝器元件。

Empty-path routes can have children. In the following example, when navigating to /team/11/user/jim, the router instantiates the wrapper component with the user component in it.

請注意,空路徑路由會繼承其父級的引數和資料。

Note that an empty path route inherits its parent's parameters and data.

      
      [{
  path: 'team/:id',
  component: Team,
  children: [{
    path: '',
    component: WrapperCmp,
    children: [{
      path: 'user/:name',
      component: User
    }]
  }]
}]
    

匹配策略

Matching Strategy

預設的路徑匹配策略是 'prefix',這意味著路由器從左開始檢查 URL 元素以檢視 URL 是否與指定的路徑匹配。例如,'/team/11/user' 與 'team/:id' 匹配。

The default path-match strategy is 'prefix', which means that the router checks URL elements from the left to see if the URL matches a specified path. For example, '/team/11/user' matches 'team/:id'.

      
      [{
  path: '',
  pathMatch: 'prefix', //default
  redirectTo: 'main'
}, {
  path: 'main',
  component: Main
}]
    

你可以將路徑匹配策略指定為 'full',以確保路徑覆蓋整個未使用的 URL。重新導向到空路徑路由時,這樣做很重要。否則,因為空路徑是任何 URL 的字首,所以路由器即使在導航到重新導向目標時又會被再次重新導向,從而造成無限迴圈。

You can specify the path-match strategy 'full' to make sure that the path covers the whole unconsumed URL. It is important to do this when redirecting empty-path routes. Otherwise, because an empty path is a prefix of any URL, the router would apply the redirect even when navigating to the redirect destination, creating an endless loop.

在以下示例中,提供 'full' pathMatch 策略可確保路由器僅在導航到 '/' 時才應用重新導向。

In the following example, supplying the 'full' pathMatch strategy ensures that the router applies the redirect if and only if navigating to '/'.

      
      [{
  path: '',
  pathMatch: 'full',
  redirectTo: 'main'
}, {
  path: 'main',
  component: Main
}]
    

無元件路由

Componentless Routes

你可以在同級元件之間共享引數。例如,假設兩個同級元件應該彼此相鄰,並且它們兩個都需要 ID 引數。你可以使用不在最上層指定元件的路由來完成此操作。

You can share parameters between sibling components. For example, suppose that two sibling components should go next to each other, and both of them require an ID parameter. You can accomplish this using a route that does not specify a component at the top level.

在以下示例中,'MainChild' 和 'AuxChild' 是同級。當導航到 'parent/10/(a//aux:b)' 時,該路由會實例化彼此相鄰的主要子元件和 aux 子元件。為此,應用程式元件必須定義主要和輔助出口。

In the following example, 'MainChild' and 'AuxChild' are siblings. When navigating to 'parent/10/(a//aux:b)', the route instantiates the main child and aux child components next to each other. For this to work, the application component must have the primary and aux outlets defined.

      
      [{
   path: 'parent/:id',
   children: [
     { path: 'a', component: MainChild },
     { path: 'b', component: AuxChild, outlet: 'aux' }
   ]
}]
    

路由器將無元件父級的引數、資料和解析結果合併為子級的引數、資料和解析結果。

The router merges the parameters, data, and resolve of the componentless parent into the parameters, data, and resolve of the children.

當用空路徑字串定義子元件時,這特別有用,如以下示例所示。使用此配置,導航到 '/parent/10' 將建立主要子元件和 aux 元件。

This is especially useful when child components are defined with an empty path string, as in the following example. With this configuration, navigating to '/parent/10' creates the main child and aux components.

      
      [{
   path: 'parent/:id',
   children: [
     { path: '', component: MainChild },
     { path: '', component: AuxChild, outlet: 'aux' }
   ]
}]
    

延遲載入

Lazy Loading

延遲載入透過將應用程式拆分為多個包並按需載入它們來加快應用程式載入時間。要使用延遲載入,請在 Route 中提供 loadChildren 屬性,而不是 children 屬性。

Lazy loading speeds up application load time by splitting the application into multiple bundles and loading them on demand. To use lazy loading, provide the loadChildren property in the Route object, instead of the children property.

給定以下示例路由,路由器將使用瀏覽器原生匯入體系按需延遲載入相關模組。

Given the following example route, the router will lazy load the associated module on demand using the browser native import system.

      
      [{
  path: 'lazy',
  loadChildren: () => import('./lazy-route/lazy.module').then(mod => mod.LazyModule),
}];