Router

class

一个提供导航和操纵 URL 能力的 NgModule。

An NgModule that provides navigation and URL manipulation capabilities.

      
      class Router {
  constructor(rootComponentType: Type<any>, urlSerializer: UrlSerializer, rootContexts: ChildrenOutletContexts, location: Location, injector: Injector, loader: NgModuleFactoryLoader, compiler: Compiler, config: Route[])
  events: Observable<Event>
  routerState: RouterState
  errorHandler: ErrorHandler
  malformedUriErrorHandler: (error: URIError, urlSerializer: UrlSerializer, url: string) => UrlTree
  navigated: boolean
  urlHandlingStrategy: UrlHandlingStrategy
  routeReuseStrategy: RouteReuseStrategy
  onSameUrlNavigation: 'reload' | 'ignore'
  paramsInheritanceStrategy: 'emptyOnly' | 'always'
  urlUpdateStrategy: 'deferred' | 'eager'
  relativeLinkResolution: 'legacy' | 'corrected'
  config: Routes
  url: string
  initialNavigation(): void
  setUpLocationChangeListener(): void
  getCurrentNavigation(): Navigation | null
  resetConfig(config: Route[]): void
  ngOnDestroy(): void
  dispose(): void
  createUrlTree(commands: any[], navigationExtras: NavigationExtras = {}): UrlTree
  navigateByUrl(url: string | UrlTree, extras: NavigationExtras = { skipLocationChange: false }): Promise<boolean>
  navigate(commands: any[], extras: NavigationExtras = { skipLocationChange: false }): Promise<boolean>
  serializeUrl(url: UrlTree): string
  parseUrl(url: string): UrlTree
  isActive(url: string | UrlTree, exact: boolean): boolean
}

参见

Route.
路由与导航。
Routing and Navigation Guide.

构造函数

创建路由器服务。

Creates the router service.

      
      constructor(rootComponentType: Type<any>, urlSerializer: UrlSerializer, rootContexts: ChildrenOutletContexts, location: Location, injector: Injector, loader: NgModuleFactoryLoader, compiler: Compiler, config: Route[])

参数

`rootComponentType`	`Type`
`urlSerializer`	`UrlSerializer`
`rootContexts`	`ChildrenOutletContexts`
`location`	`Location`
`injector`	`Injector`
`loader`	`NgModuleFactoryLoader`
`compiler`	`Compiler`
`config`	`Route[]`

属性

属性	说明
`events: Observable<Event>`	只读 An event stream for routing events in this NgModule.
`routerState: RouterState`	只读 The current state of routing in this NgModule.
`errorHandler: ErrorHandler`	本模块中的导航错误处理器。 A handler for navigation errors in this NgModule.
`malformedUriErrorHandler: (error: URIError, urlSerializer: UrlSerializer, url: string) => UrlTree`	uri 格式无效错误的处理器，在 `Router.parseUrl(url)` 由于 `url` 包含无效字符而报错时调用。最常见的情况可能是 `%` 本身既没有被编码，又不是正常 `%` 编码序列的一部分。 Malformed uri error handler is invoked when `Router.parseUrl(url)` throws an error due to containing an invalid character. The most common case would be a `%` sign that's not encoded and is not part of a percent encoded sequence.
`navigated: boolean`	如果为 True 则表示是否发生过至少一次导航，反之为 False。 True if at least one navigation event has occurred, false otherwise.
`urlHandlingStrategy: UrlHandlingStrategy`	提取并合并 URL。在 AngularJS 向 Angular 迁移时会用到。 Extracts and merges URLs. Used for AngularJS to Angular migrations.
`routeReuseStrategy: RouteReuseStrategy`	The strategy for re-using routes.
`onSameUrlNavigation: 'reload' \| 'ignore'`	定义当路由器收到一个导航到当前 URL 的请求时应该怎么做。可取下列值之一： How to handle a navigation request to the current URL. One of: `'ignore'`：路由器会忽略此请求。 `'ignore'` : The router ignores the request. `'reload'`：路由器会重新加载当前 URL。用来实现"刷新"功能。 `'reload'` : The router reloads the URL. Use to implement a "refresh" feature.
`paramsInheritanceStrategy: 'emptyOnly' \| 'always'`	如何从父路由向子路由合并参数、数据和解析到的数据。可取下列值之一： How to merge parameters, data, and resolved data from parent to child routes. One of: `'emptyOnly'`：让无路径或无组件的路由继承父级的参数、数据和解析到的数据。 `'emptyOnly'` : Inherit parent parameters, data, and resolved data for path-less or component-less routes. `'always'`：让所有子路由都继承父级的参数、数据和解析到的数据。 `'always'` : Inherit parent parameters, data, and resolved data for all child routes.
`urlUpdateStrategy: 'deferred' \| 'eager'`	定义路由器要何时更新浏览器的 URL。默认行为是在每次成功的导航之后更新。不过，有些应用会更愿意在导航开始时就更新。最常见的情况是尽早更新 URL，这样当导航失败时，你就可以在出错的 URL 上显示一条错误信息了。可用的选项包括： Defines when the router updates the browser URL. The default behavior is to update after successful navigation. However, some applications may prefer a mode where the URL gets updated at the beginning of navigation. The most common use case would be updating the URL early so if navigation fails, you can show an error message with the URL that failed. Available options are: `'deferred'`，默认值，在导航完毕后更新浏览器 URL。 `'deferred'`, the default, updates the browser URL after navigation has finished. `'eager'`，在导航开始时更新浏览器的 URL。 `'eager'`, updates browser URL at the beginning of navigation.
`relativeLinkResolution: 'legacy' \| 'corrected'`	欲知详情，参见 `RouterModule`。 See `RouterModule`for more information.
`config: Routes`	Declared in constructor.
`url: string`	只读当前 URL The current URL.

方法

initialNavigation()
设置位置变化监听器，并执行首次导航。 Sets up the location change listener and performs the initial navigation.
initialNavigation(): void `initialNavigation(): void` 参数没有参数。返回值 `void`

initialNavigation()

设置位置变化监听器，并执行首次导航。

Sets up the location change listener and performs the initial navigation.

      
      initialNavigation(): void

参数

没有参数。

返回值

void

setUpLocationChangeListener()
设置位置变化监听器。 Sets up the location change listener.
setUpLocationChangeListener(): void `setUpLocationChangeListener(): void` 参数没有参数。返回值 `void`

setUpLocationChangeListener()

设置位置变化监听器。

Sets up the location change listener.

      
      setUpLocationChangeListener(): void

参数

没有参数。

返回值

void

getCurrentNavigation()
The current Navigation object if one exists
getCurrentNavigation(): Navigation \| null `getCurrentNavigation(): Navigation \| null` 参数没有参数。返回值 `Navigation \| null`

resetConfig()

重置供导航和生成链接使用的配置项。

Resets the configuration used for navigation and generating links.

      
      resetConfig(config: Route[]): void

参数

config

Route[]

新配置中的路由定义数组。

The route array for the new configuration.

返回值

void

使用说明

      
      router.resetConfig([
 { path: 'team/:id', component: TeamCmp, children: [
   { path: 'simple', component: SimpleCmp },
   { path: 'user/:name', component: UserCmp }
 ]}
]);

ngOnDestroy()
ngOnDestroy(): void `ngOnDestroy(): void` 参数没有参数。返回值 `void`

dispose()
销毁路由器 Disposes of the router.
dispose(): void `dispose(): void` 参数没有参数。返回值 `void`

dispose()

销毁路由器

Disposes of the router.

      
      dispose(): void

参数

没有参数。

返回值

void

createUrlTree()

把一个命令数组应用于当前的 URL 树，并创建一个新的 URL 树。

Applies an array of commands to the current URL tree and creates a new URL tree.

      
      createUrlTree(commands: any[], navigationExtras: NavigationExtras = {}): UrlTree

参数

commands

any[]

要应用的命令数组。

An array of commands to apply.

navigationExtras

NavigationExtras

可选. 默认值是 {}.

返回值

新的 URL Tree。

UrlTree: The new URL tree.

如果指定了激活路由，就以该路由为起点应用这些命令。如果没有指定激活路由，就以根路由为起点应用这些命令。

When given an activate route, applies the given commands starting from the route. When not given a route, applies the given command starting from the root.

使用说明

      
      // create /team/33/user/11
router.createUrlTree(['/team', 33, 'user', 11]);
 
// create /team/33;expand=true/user/11
router.createUrlTree(['/team', 33, {expand: true}, 'user', 11]);
 
// you can collapse static segments like this (this works only with the first passed-in value):
router.createUrlTree(['/team/33/user', userId]);
 
// If the first segment can contain slashes, and you do not want the router to split it, you
// can do the following:
 
router.createUrlTree([{segmentPath: '/one/two'}]);
 
// create /team/33/(user/11//right:chat)
router.createUrlTree(['/team', 33, {outlets: {primary: 'user/11', right: 'chat'}}]);
 
// remove the right secondary node
router.createUrlTree(['/team', 33, {outlets: {primary: 'user/11', right: null}}]);
 
// assuming the current url is `/team/33/user/11` and the route points to `user/11`
 
// navigate to /team/33/user/11/details
router.createUrlTree(['details'], {relativeTo: route});
 
// navigate to /team/33/user/22
router.createUrlTree(['../22'], {relativeTo: route});
 
// navigate to /team/44/user/22
router.createUrlTree(['../../team/44/user/22'], {relativeTo: route});

navigateByUrl()

基于所提供的 URL 进行导航，必须使用绝对路径。

Navigate based on the provided URL, which must be absolute.

      
      navigateByUrl(url: string | UrlTree, extras: NavigationExtras = { skipLocationChange: false }): Promise<boolean>

参数

url

string | UrlTree

一个绝对 URL。该函数不会对当前 URL 做任何修改。

An absolute URL. The function does not apply any delta to the current URL.

extras

NavigationExtras

一个包含一组属性的对象，它会修改导航策略。该函数会忽略 NavigationExtras 中任何可能会改变所提供的 URL 的属性

An object containing properties that modify the navigation strategy. The function ignores any properties in the NavigationExtras that would change the provided URL.

可选. 默认值是 { skipLocationChange: false }.

返回值

一个 Promise，当导航成功时，它会解析成 true；导航失败或出错时，它会解析成 false。

Promise<boolean>: A Promise that resolves to 'true' when navigation succeeds, to 'false' when navigation fails, or is rejected on error.

使用说明

用法

Example

      
      router.navigateByUrl("/team/33/user/11");

// Navigate without updating the URL
router.navigateByUrl("/team/33/user/11", { skipLocationChange: true });

navigate()

基于所提供的命令数组和起点路由进行导航。如果没有指定起点路由，则从根路由开始进行绝对导航。

Navigate based on the provided array of commands and a starting point. If no starting route is provided, the navigation is absolute.

      
      navigate(commands: any[], extras: NavigationExtras = { skipLocationChange: false }): Promise<boolean>

参数

`commands`	`any[]`
`extras`	`NavigationExtras`	可选. 默认值是 `{ skipLocationChange: false }`.

返回值

Promise<boolean>

返回一个 Promise：

Returns a promise that:

当导航成功时解析为 'true'，
resolves to 'true' when navigation succeeds,
当导航失败时解析为 'false'，
resolves to 'false' when navigation fails,
当出错时拒绝（reject）。
is rejected when an error happens.

使用说明

用法

Example

      
      router.navigate(['team', 33, 'user', 11], {relativeTo: route});

// Navigate without updating the URL
router.navigate(['team', 33, 'user', 11], {relativeTo: route, skipLocationChange: true});

navigate() 的第一个参数是相对于当前 URL 或第二参数 NavigationExtras 中 relativeTo 属性所指定的 URL 的增量修改。

The first parameter of navigate() is a delta to be applied to the current URL or the one provided in the relativeTo property of the second parameter (the NavigationExtras).

要想影响到浏览器的 history.state 结构，还可以传入一个 state 参数。它必须是一个对象，因为路由器会在创建新的历史记录之前为该对象添加 navigationId 属性。

In order to affect this browser's history.state entry, the state parameter can be passed. This must be an object because the router will add the navigationId property to this object before creating the new history item.

serializeUrl()

把 UrlTree 序列化为字符串

Serializes a UrlTree into a string

      
      serializeUrl(url: UrlTree): string

参数

url UrlTree

返回值

string

parseUrl()

把字符串解析为 UrlTree

Parses a string into a UrlTree

      
      parseUrl(url: string): UrlTree

参数

url string

返回值

UrlTree

isActive()

返回指定的 url 是否处于激活状态

Returns whether the url is activated

      
      isActive(url: string | UrlTree, exact: boolean): boolean

参数

`url`	`string \| UrlTree`
`exact`	`boolean`

返回值

boolean

参见link

构造函数link

参数

属性link

方法link

initialNavigation() link

参数

返回值

setUpLocationChangeListener() link

参数

返回值

getCurrentNavigation() link

参数

返回值

resetConfig() link

参数

返回值

使用说明link

ngOnDestroy() link

参数

返回值

dispose() link

参数

返回值

createUrlTree() link

参数

返回值

使用说明link

navigateByUrl() link

参数

返回值

使用说明link

用法link

Examplelink

navigate() link

参数

返回值

使用说明link

用法link

Examplelink

serializeUrl() link

参数

返回值

parseUrl() link

参数

返回值

isActive() link

参数

返回值

参见

构造函数

属性

方法

initialNavigation()

setUpLocationChangeListener()

getCurrentNavigation()

resetConfig()

使用说明

ngOnDestroy()

dispose()

createUrlTree()

使用说明

navigateByUrl()

使用说明

用法

Example

navigate()

使用说明

用法

Example

serializeUrl()

parseUrl()

isActive()