Routeslink
Represents router configuration.
表示路由器配置。
说明
Routes
is an array of route configurations. Each one has the following properties:
Routes
是个表示路由配置的数组。每一个都具有下列属性:
path
is a string that uses the route matcher DSL.path
是一个用于路由匹配 DSL 中的字符串。pathMatch
is a string that specifies the matching strategy.pathMatch
是一个用来指定路由匹配策略的字符串。matcher
defines a custom strategy for path matching and supersedespath
andpathMatch
.component
is a component type.component
是一个组件类型。redirectTo
is the url fragment which will replace the current matched segment.redirectTo
是一个 URL 片段,它将会代替当前匹配的 URL 片段。outlet
is the name of the outlet the component should be placed into.outlet
是该组件要放进的出口的名字。canActivate
is an array of DI tokens used to look up CanActivate handlers. SeeCanActivate
for more info.canActivate
是一个 DI 令牌的数组,用于查阅CanActivate
处理器,欲知详情,参见CanActivate
。canActivateChild
is an array of DI tokens used to look up CanActivateChild handlers. SeeCanActivateChild
for more info.canActivateChild
是一个 DI 令牌的数组,用于查阅CanActivateChild
处理器,欲知详情,参见CanActivateChild
。canDeactivate
is an array of DI tokens used to look up CanDeactivate handlers. SeeCanDeactivate
for more info.canDeactivate
是一个 DI 令牌的数组,用于查阅CanDeactivate
处理器,欲知详情,参见CanDeactivate
。canLoad
is an array of DI tokens used to look up CanLoad handlers. SeeCanLoad
for more info.data
is additional data provided to the component viaActivatedRoute
.data
是一个可通过ActivatedRoute
提供给组件的附加数据。resolve
is a map of DI tokens used to look up data resolvers. SeeResolve
for more info.runGuardsAndResolvers
defines when guards and resolvers will be run. By default they run only when the matrix parameters of the route change. When set toparamsOrQueryParamsChange
they will also run when query params change. And when set toalways
, they will run every time.runGuardsAndResolvers
定义了路由守卫和解析器的运行时机。默认情况下,它们只会在路由的矩阵参数(#
)变化时才会执行。 当设置为paramsOrQueryParamsChange
时,它们在查询参数(?
)变化时也会执行。当设置为always
时,它们每次都会执行。children
is an array of child route definitions.children
是一个子路由定义构成的数组。loadChildren
is a reference to lazy loaded child routes. SeeLoadChildren
for more info.loadChildren
是一个用于惰性加载子路由的引用。欲知详情,参见LoadChildren
。
Simple Configuration
简单配置
When navigating to /team/11/user/bob
, the router will create the team component with the user component in it.
当导航到 /team/11/user/bob
时,路由器将会创建一个 Team 组件,其中包含一个 User 组件。
Multiple Outlets
多重路由出口
When navigating to /team/11(aux:chat/jim)
, the router will create the team component next to the chat component. The chat component will be placed into the aux outlet.
在导航到 /team/11(aux:chat/jim)
时,路由器将会在创建了 Chat 组件之后创建一个 Team 组件。Chat 组件会被放进 aux
路由出口中。
Wild Cards
通配符
Regardless of where you navigate to, the router will instantiate the sink component.
无论你导航到哪里,路由器都会实例化这个 Sink 组件。
Redirects
重定向
When navigating to '/team/11/legacy/user/jim', the router will change the url to '/team/11/user/jim', and then will instantiate the team component with the user component in it.
当导航到 '/team/11/legacy/user/jim' 时,路由器将会把 URL 改成 '/team/11/user/jim',然后实例化一个 Team 组件,其中包含一个 User 组件。
If the redirectTo
value starts with a '/', then it is an absolute redirect. E.g., if in the example above we change the redirectTo
to /user/:name
, the result url will be '/user/jim'.
如果 redirectTo
的值是以 /
开头的,则会执行一次绝对导航。比如,如果上面的例子中我们把 redirectTo
改为 /user/:name
, 那么最终的 url 就会是 '/user/jim'
。
Empty Path
空路径
Empty-path route configurations can be used to instantiate components that do not 'consume' any url segments. Let's look at the following configuration:
空路径路由可用来实例化一些不"消费"任何 url 区段的组件。来看下列配置:
When navigating to /team/11
, the router will instantiate the AllUsers component.
当导航到 /team/11
时,路由器就会实例化 AllUsers 组件。
Empty-path routes can have children.
空路径路由还可以有子路由。
When navigating to /team/11/user/jim
, the router will instantiate the wrapper component with the user component in it.
当导航到 /team/11/user/jim
时,路由器将会实例化 WrapperCmp
,其中还有一个 User
组件。
An empty path route inherits its parent's params and data. This is because it cannot have its own params, and, as a result, it often uses its parent's params and data as its own.
空路径路由会继承它的父路由的参数和数据。这是因为它不能拥有自己的参数,所以,它通常会把其父路由的参数和数据当做自己的使用。
Matching Strategy
匹配策略
By default the router will look at what is left in the url, and check if it starts with the specified path (e.g., /team/11/user
starts with team/:id
).
默认情况下,路由器会查看当前 URL 中还剩下什么,并检查它是否以指定的路径开头(比如 /team/11/user
就是用 team/:id
开头的)。
We can change the matching strategy to make sure that the path covers the whole unconsumed url, which is akin to unconsumedUrl === path
or $
regular expressions.
我们可以修改匹配策略,以确保该路径匹配所有尚未消费的 url,它相当于 unconsumedUrl === path
或正则表达式中的 $
。
This is particularly important when redirecting empty-path routes.
如果要把空路径路由重定向到别处,这尤其重要。
Since an empty path is a prefix of any url, even when navigating to '/main', the router will still apply the redirect.
由于空路径是任何 url 的前缀,所以即使想导航到 '/main',路由器仍然会执行这次跳转。
If pathMatch: full
is provided, the router will apply the redirect if and only if navigating to '/'.
如果指定了 pathMatch: full
,则路由器只有在导航到 '/'
时才会执行这次跳转。
Componentless Routes
无组件路由
It is useful at times to have the ability to share parameters between sibling components.
当需要在兄弟组件之间共享参数时,这非常有用。
Say we have two components--ChildCmp and AuxCmp--that we want to put next to each other and both of them require some id parameter.
假设我们有两个组件 ChildCmp
和 AuxCmp
,它们彼此相邻,并且都需要一个 id
参数。
One way to do that would be to have a bogus parent component, so both the siblings can get the id parameter from it. This is not ideal. Instead, you can use a componentless route.
解决方案之一就是伪造一个父组件,这样一来,这些兄弟组件就可以通过它获取同一个 id 参数了。但这还不理想。我们要改用无组件路由。
So when navigating to parent/10/(a//aux:b)
, the route will instantiate the main child and aux child components next to each other. In this example, the application component has to have the primary and aux outlets defined.
这样当导航到 parent/10/(a//aux:b)
时,该路由将会先后实例化主要的子控件和辅助子控件。在这个例子中,应用组件必须定义主路由出口和 aux
出口。
The router will also merge the params
, data
, and resolve
of the componentless parent into the params
, data
, and resolve
of the children. This is done because there is no component that can inject the activated route of the componentless parent.
路由器还会把这个无组件父路由的 params
、data
和 resolve
结果合并到子路由的 params
、data
和 resolve
中。 之所以能这样,是因为这里没有组件能接收这个无组件父路由的激活路由信息,所以只能合并到子路由中。
This is especially useful when child components are defined as follows:
当用如下方式定义子组件时,这会非常有用:
With this configuration in place, navigating to '/parent/10' will create the main child and aux components.
使用这种配置,导航到 '/parent/10' 时就会创建主要的子组件和辅助子组件。
Lazy Loading
惰性加载
Lazy loading speeds up our application load time by splitting it into multiple bundles, and loading them on demand. The router is designed to make lazy loading simple and easy. Instead of providing the children property, you can provide the loadChildren
property, as follows:
惰性加载可以通过把应用拆分成多个发布包,并按需加载它们,来加速应用的启动时间。 路由器的设计让惰性加载非常简易。只要用 loadChildren
属性代替 children
属性就可以了,例如:
The router will use registered NgModuleFactoryLoader to fetch an NgModule associated with 'team'. Then it will extract the set of routes defined in that NgModule, and will transparently add those routes to the main configuration.
路由器会使用已注册的 NgModuleFactoryLoader
来获取与 team
相关的 NgModule。 然后,它就会提取出那个 NgModule 中定义的一组路由,并透明的把那些路由添加到主路由配置中。