填写这份《一分钟调查》,帮我们(开发组)做得更好!去填写Home

Router

提供导航和操纵 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 }
      
      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[])
      
      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 RouterModulefor more information.

config: Routes Declared in constructor.
url: string 只读

当前 URL

The current url

方法

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

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

      
      initialNavigation(): void
    
参数

没有参数。

返回值

void

设置位置变化监听器。

Sets up the location change listener.

setUpLocationChangeListener(): void
      
      setUpLocationChangeListener(): void
    
参数

没有参数。

返回值

void

The current Navigation object if one exists

getCurrentNavigation(): Navigation | null
      
      getCurrentNavigation(): Navigation | null
    
参数

没有参数。

返回值

Navigation | null

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

Resets the configuration used for navigation and generating links.

resetConfig(config: Route[]): void
      
      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 } ]} ]);
      
      router.resetConfig([
 { path: 'team/:id', component: TeamCmp, children: [
   { path: 'simple', component: SimpleCmp },
   { path: 'user/:name', component: UserCmp }
 ]}
]);
    
ngOnDestroy(): void
      
      ngOnDestroy(): void
    
参数

没有参数。

返回值

void

销毁路由器

Disposes of the router

dispose(): void
      
      dispose(): void
    
参数

没有参数。

返回值

void

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

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

createUrlTree(commands: any[], navigationExtras: NavigationExtras = {}): UrlTree
      
      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});
      
      
  1. // create /team/33/user/11
  2. router.createUrlTree(['/team', 33, 'user', 11]);
  3.  
  4. // create /team/33;expand=true/user/11
  5. router.createUrlTree(['/team', 33, {expand: true}, 'user', 11]);
  6.  
  7. // you can collapse static segments like this (this works only with the first passed-in value):
  8. router.createUrlTree(['/team/33/user', userId]);
  9.  
  10. // If the first segment can contain slashes, and you do not want the router to split it, you
  11. // can do the following:
  12.  
  13. router.createUrlTree([{segmentPath: '/one/two'}]);
  14.  
  15. // create /team/33/(user/11//right:chat)
  16. router.createUrlTree(['/team', 33, {outlets: {primary: 'user/11', right: 'chat'}}]);
  17.  
  18. // remove the right secondary node
  19. router.createUrlTree(['/team', 33, {outlets: {primary: 'user/11', right: null}}]);
  20.  
  21. // assuming the current url is `/team/33/user/11` and the route points to `user/11`
  22.  
  23. // navigate to /team/33/user/11/details
  24. router.createUrlTree(['details'], {relativeTo: route});
  25.  
  26. // navigate to /team/33/user/22
  27. router.createUrlTree(['../22'], {relativeTo: route});
  28.  
  29. // navigate to /team/44/user/22
  30. router.createUrlTree(['../../team/44/user/22'], {relativeTo: route});

基于所提供的 url 进行导航。这种导航永远使用绝对路径。

Navigate based on the provided url. This navigation is always absolute.

navigateByUrl(url: string | UrlTree, extras: NavigationExtras = { skipLocationChange: false }): Promise<boolean>
      
      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 });
      
      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 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>
      
      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});
      
      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 或第二参数 NavigationExtrasrelativeTo 属性所指定的 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.

UrlTree 序列化为字符串

Serializes a UrlTree into a string

serializeUrl(url: UrlTree): string
      
      serializeUrl(url: UrlTree): string
    
参数
url UrlTree
返回值

string

把字符串解析为 UrlTree

Parses a string into a UrlTree

parseUrl(url: string): UrlTree
      
      parseUrl(url: string): UrlTree
    
参数
url string
返回值

UrlTree

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

Returns whether the url is activated

isActive(url: string | UrlTree, exact: boolean): boolean
      
      isActive(url: string | UrlTree, exact: boolean): boolean
    
参数
url string | UrlTree
exact boolean
返回值

boolean