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

RouterModule

添加路由器指令和服务提供商。

Adds router directives and providers.

查看"说明"...

      
      class RouterModule {
  static forRoot(routes: Route[], config?: ExtraOptions): ModuleWithProviders<RouterModule>
  static forChild(routes: Route[]): ModuleWithProviders<RouterModule>
}
    

说明

在构建应用时,管理状态的转换是最难的任务之一。对 Web 来说尤其如此,你还要确保这个状态同时在 URL 中反映出来。 另外,我们通常会希望把应用拆分成多个发布包,并按需加载。要让这些工作透明化,可没那么简单。

Managing state transitions is one of the hardest parts of building applications. This is especially true on the web, where you also need to ensure that the state is reflected in the URL. In addition, we often want to split applications into multiple bundles and load them on demand. Doing this transparently is not trivial.

Angular 的路由器解决了这些问题。使用路由器,你可以声明式的指定应用的状态、管理状态的转换,还可以处理好 URL,还可以按需加载发布包。

The Angular router solves these problems. Using the router, you can declaratively specify application states, manage state transitions while taking care of the URL, and load bundles on demand.

阅读开发指南 以获得如何使用路由器的全景图。

Read this developer guide to get an overview of how the router should be used.

静态方法

创建一个带有所有路由器服务提供商和指令的模块。它还可以(可选的)设置一个应用监听器,来执行首次导航。

Creates a module with all the router providers and directives. It also optionally sets up an application listener to perform an initial navigation.

static forRoot(routes: Route[], config?: ExtraOptions): ModuleWithProviders<RouterModule>
      
      static forRoot(routes: Route[], config?: ExtraOptions): ModuleWithProviders<RouterModule>
    
参数
routes Route[]
config ExtraOptions

可选. 默认值是 undefined.

返回值

ModuleWithProviders<RouterModule>

配置项:

Configuration Options:

  • enableTracing 可以切换路由器是否应该把它所有的内部事件都记录到控制台中。

    enableTracing Toggles whether the router should log all navigation events to the console.

  • useHash 启用 LocationStrategy 位置策略,用 URL 片段(#)代替 history API。

    useHash Enables the location strategy that uses the URL fragment instead of the history API.

  • initialNavigation 禁用首次导航。

    initialNavigation Disables the initial navigation.

  • errorHandler 为那些失败的导航定义了一个自定义错误处理器。

    errorHandler Defines a custom error handler for failed navigations.

  • preloadingStrategy 配置预加载策略(参见 PreloadAllModules)。

    preloadingStrategy Configures a preloading strategy. See PreloadAllModules.

  • onSameUrlNavigation 定义了当路由器接收到一个到当前 URL 的导航请求时,应该做什么。

    onSameUrlNavigation Define what the router should do if it receives a navigation request to the current URL.

  • scrollPositionRestoration 配置了当导航回来时是否需要还原滚动位置。

    scrollPositionRestoration Configures if the scroll position needs to be restored when navigating back.

  • anchorScrolling 配置了当 URL 指定了一个片段(fragment)时,路由器是否需要滚动到那个元素处。

    anchorScrolling Configures if the router should scroll to the element when the url has a fragment.

  • scrollOffset 配置了当滚动到某个元素时,路由应该使用的滚动偏移量。

    scrollOffset Configures the scroll offset the router will use when scrolling to an element.

  • paramsInheritanceStrategy 定义了路由器要如何把父路由的参数、数据和解析出的数据合并到子路由中。

    paramsInheritanceStrategy Defines how the router merges params, data and resolved data from parent to child routes.

  • malformedUriErrorHandler 定义了一个自定义的无效 uri 错误处理器函数。当 encodedURI 的参数中包含错误的字符序列时,就会调用这个处理器。

    malformedUriErrorHandler Defines a custom malformed uri error handler function. This handler is invoked when encodedURI contains invalid character sequences.

  • urlUpdateStrategy 定义了路由器应该何时更新浏览器的 URL。默认的行为是在成功的导航之后才更新。

    urlUpdateStrategy Defines when the router updates the browser URL. The default behavior is to update after successful navigation.

  • relativeLinkResolution 指定了在空路径路由的组件中应该正确解析相对路径。

    relativeLinkResolution Enables the correct relative link resolution in components with empty paths.

请参见 ExtraOptions 以了解上述选项的详情。

See ExtraOptions for more details about the above options.

创建一个具有所有路由器指令和一个用于注册路由的提供商。

Creates a module with all the router directives and a provider registering routes.

static forChild(routes: Route[]): ModuleWithProviders<RouterModule>
      
      static forChild(routes: Route[]): ModuleWithProviders<RouterModule>
    
参数
routes Route[]
返回值

ModuleWithProviders<RouterModule>

指令

名称说明
RouterLink
      
      RouterLink
    

让你可以在应用中链接到特定的路由。

Lets you link to specific routes in your app.

RouterLinkActive
      
      RouterLinkActive
    

当此链接指向的路由激活时,往宿主元素上添加一个 CSS 类。

Lets you add a CSS class to an element when the link's route becomes active.

RouterLinkWithHref
      
      RouterLinkWithHref
    

允许你在应用中链接到特定的路由。

Lets you link to specific routes in your app.

RouterOutlet
      
      RouterOutlet
    

一个占位符,Angular 会根据当前的路由器状态动态填充它。

Acts as a placeholder that Angular dynamically fills based on the current router state.

使用说明

RouterModule 可能会被多次导入:每个惰性加载的发布包都会导入一次。 但由于路由器要和全局共享的资源 - location 打交道,所以不能同时激活一个以上的 Router 服务。

RouterModule can be imported multiple times: once per lazily-loaded bundle. Since the router deals with a global shared resource--location, we cannot have more than one router service active.

这就是需要两种方式来创建本模块的原因:RouterModule.forRootRouterModule.forChild

That is why there are two ways to create the module: RouterModule.forRoot and RouterModule.forChild.

  • forRoot 创建一个包含所有指令、指定的路由和 Router 服务本身的模块。

    forRoot creates a module that contains all the directives, the given routes, and the router service itself.

  • forChild 会创建一个包含所有指令、指定的路由,但不含 Router 服务的模块。

    forChild creates a module that contains all the directives and the given routes, but does not include the router service.

当注册在根模块时,该模块应该这样用:

When registered at the root, the module should be used as follows

@NgModule({ imports: [RouterModule.forRoot(ROUTES)] }) class MyNgModule {}
      
      @NgModule({
  imports: [RouterModule.forRoot(ROUTES)]
})
class MyNgModule {}
    

对于子模块和惰性加载的子模块,该模块应该这样用:

For submodules and lazy loaded submodules the module should be used as follows:

@NgModule({ imports: [RouterModule.forChild(ROUTES)] }) class MyNgModule {}
      
      @NgModule({
  imports: [RouterModule.forChild(ROUTES)]
})
class MyNgModule {}