Router

class

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

Provides the 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
}

说明

查看 Routes 以了解详情和范例。

See Routes for more details and examples.

构造函数

创建路由器服务。

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>`	只读
`routerState: RouterState`	只读
`errorHandler: ErrorHandler`	当导航发生错误时要调用的错误处理器。 Error handler that is invoked when a navigation errors. 欲知详情，参见 `ErrorHandler`。 See `ErrorHandler` for more information.
`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`	表示是否发生过至少一次导航。 Indicates if at least one navigation happened.
`urlHandlingStrategy: UrlHandlingStrategy`	提取并合并 URL。在 AngularJS 向 Angular 迁移时会用到。 Extracts and merges URLs. Used for AngularJS to Angular migrations.
`routeReuseStrategy: RouteReuseStrategy`
`onSameUrlNavigation: 'reload' \| 'ignore'`	定义当路由器收到一个导航到当前 URL 的请求时应该怎么做。默认情况下，路由器将会忽略这次导航。但这样会阻止类似于 "刷新" 按钮的特性。使用该选项可以配置导航到当前 URL 时的行为。默认值为 'ignore'。 Define what the router should do if it receives a navigation request to the current URL. By default, the router will ignore this navigation. However, this prevents features such as a "refresh" button. Use this option to configure the behavior when navigating to the current URL. Default is 'ignore'.
`paramsInheritanceStrategy: 'emptyOnly' \| 'always'`	定义路由器如何从父路由向子路由合并参数、数据。可用选项为： Defines how the router merges params, data and resolved data from parent to child routes. Available options are: `'emptyOnly'`，默认值，只从无路径或无组件的路由继承父级参数。 `'emptyOnly'`, the default, only inherits parent params for path-less or component-less routes. `'always'`，允许无条件地继承父级参数。 `'always'`, enables unconditional inheritance of parent params.
`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`	声明于构造函数中
`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[]

返回值

void

使用说明

用法

Example

      
      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[]`
`navigationExtras`	`NavigationExtras`	可选. 默认值是 `{}`.

返回值

UrlTree

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

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.

使用说明

用法

Example

      
      // 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. This navigation is always absolute.

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

参数

`url`	`string \| UrlTree`
`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.navigateByUrl("/team/33/user/11");

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

由于 navigateByUrl() 要求必须用绝对地址作为第一个参数，所以它不会在当前 URL 上做增量修改，并且会忽略第二个参数 NavigationExtras 中所有可能会更改 URL 的属性。

Since navigateByUrl() takes an absolute URL as the first parameter, it will not apply any delta to the current URL and ignores any properties in the second parameter (the NavigationExtras) that would change the provided URL.

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

用法link

Examplelink

ngOnDestroy() link

参数

返回值

dispose() link

参数

返回值

createUrlTree() link

参数

返回值

使用说明link

用法link

Examplelink

navigateByUrl() link

参数

返回值

使用说明link

用法link

Examplelink

navigate() link

参数

返回值

使用说明link

用法link

Examplelink

serializeUrl() link

参数

返回值

parseUrl() link

参数

返回值

isActive() link

参数

返回值

说明

构造函数

属性

方法

initialNavigation()

setUpLocationChangeListener()

getCurrentNavigation()

resetConfig()

使用说明

用法

Example

ngOnDestroy()

dispose()

createUrlTree()

使用说明

用法

Example

navigateByUrl()

使用说明

用法

Example

navigate()

使用说明

用法

Example

serializeUrl()

parseUrl()

isActive()