修订完router
This commit is contained in:
Zhicheng Wang
parent
5f20e0ce45
commit
9db69011c3
|
|
@ -1877,6 +1877,8 @@ a#hero-detail-ctor
|
|||
a#reuse
|
||||
:marked
|
||||
#### Observable <i>params</i> and component reuse
|
||||
|
||||
#### <i>参数</i>的可观察对象（Observable）与组件复用
|
||||
|
||||
In this example, you retrieve the route params from an `Observable`.
|
||||
That implies that the route params can change during the lifetime of this component.
|
||||
|
|
@ -2255,6 +2257,9 @@ a#route-animation
|
|||
|
||||
:marked
|
||||
### Adding animations to the routed component
|
||||
|
||||
### 为路由组件添加动画
|
||||
|
||||
The heroes feature module is almost complete, but what is a feature without some smooth transitions?
|
||||
|
||||
这个“英雄”特性模块就要完成了，但这个特性还没有平滑的转场效果。
|
||||
|
|
@ -2265,6 +2270,9 @@ a#route-animation
|
|||
在这一节，我们将为*英雄详情*组件添加一些[动画](../guide/animations.html)。
|
||||
|
||||
First import `BrowserAnimationsModule`:
|
||||
|
||||
首先导入`BrowserAnimationsModule`：
|
||||
|
||||
+makeExcerpt('src/app/app.module.ts', 'animations-module', 'src/app/app.module.ts (@NgModule imports excerpt)')
|
||||
|
||||
:marked
|
||||
|
|
@ -2914,23 +2922,23 @@ a#clear-secondary-routes
|
|||
|
||||
1. [`CanActivate`](../api/router/index/CanActivate-interface.html) to mediate navigation *to* a route.
|
||||
|
||||
用[CanActivate](../api/router/index/CanActivate-interface.html)来处理导航*到*某路由的情况。
|
||||
用[`CanActivate`](../api/router/index/CanActivate-interface.html)来处理导航*到*某路由的情况。
|
||||
|
||||
2. [`CanActivateChild()`](../api/router/index/CanActivateChild-interface.html) to mediate navigation *to* a child route.
|
||||
|
||||
用[CanActivateChild](../api/router/index/CanActivateChild-interface.html)处理导航*到*子路由的情况。
|
||||
用[`CanActivateChild`](../api/router/index/CanActivateChild-interface.html)处理导航*到*子路由的情况。
|
||||
|
||||
3. [`CanDeactivate`](../api/router/index/CanDeactivate-interface.html) to mediate navigation *away* from the current route.
|
||||
|
||||
用[CanDeactivate](../api/router/index/CanDeactivate-interface.html)来处理从当前路由*离开*的情况。
|
||||
用[`CanDeactivate`](../api/router/index/CanDeactivate-interface.html)来处理从当前路由*离开*的情况。
|
||||
|
||||
4. [`Resolve`](../api/router/index/Resolve-interface.html) to perform route data retrieval *before* route activation.
|
||||
|
||||
用[Resolve](../api/router/index/Resolve-interface.html)在路由激活*之前*获取路由数据。
|
||||
用[`Resolve`](../api/router/index/Resolve-interface.html)在路由激活*之前*获取路由数据。
|
||||
|
||||
5. [`CanLoad`](../api/router/index/CanLoad-interface.html) to mediate navigation *to* a feature module loaded _asynchronously_.
|
||||
|
||||
用[CanLoad](../api/router/index/CanLoad-interface.html)来处理*异步*导航到某特性模块的情况。
|
||||
用[`CanLoad`](../api/router/index/CanLoad-interface.html)来处理*异步*导航到某特性模块的情况。
|
||||
|
||||
:marked
|
||||
You can have multiple guards at every level of a routing hierarchy.
|
||||
|
|
@ -2941,9 +2949,10 @@ a#clear-secondary-routes
|
|||
and the entire navigation is canceled.
|
||||
|
||||
在分层路由的每个级别上，我们都可以设置多个守卫。
|
||||
路由器会先按照从最深的子路由由下往上检查的顺序来检查`CanDeactivate`守护条件。
|
||||
然后它会按照从上到下的顺序检查`CanActivate`守卫。
|
||||
如果_任何_守卫返回`false`，其它尚未完成的守卫会被取消，这样整个导航就被取消了。
|
||||
路由器会先按照从最深的子路由由下往上检查的顺序来检查`CanDeactivate()`和`CanActivateChild()`守卫。
|
||||
然后它会按照从上到下的顺序检查`CanActivate()`和`CanActivateChild()`守卫。
|
||||
如果特性模块是异步加载的，在加载它之前还会检查`CanLoad()`守卫。
|
||||
如果*任何*一个守卫返回`false`，其它尚未完成的守卫会被取消，这样整个导航就被取消了。
|
||||
|
||||
There are several examples over the next few sections.
|
||||
|
||||
|
|
@ -3021,7 +3030,7 @@ a#can-activate-guard
|
|||
`[routerLinkActiveOptions]="{ exact: true }"`, marks the `./` link as active when
|
||||
the user navigates to the `/admin` URL and not when navigating to any of the child routes.
|
||||
|
||||
由于`AdminModule`中管理仪表盘的`RouterLink`是一个空路径的路由，所以它会匹配到管理特性区的任何路由。但我们只有在访问`Dashboard`路由时才希望该链接被激活。所以我们往`Dashboard`这个routerLink上添加了另一个绑定`[routerLinkActiveOptions]="{ exact: true }"`，这样就只有当我们导航到`/admin`这个URL时才会激活它，而不会在导航到它的某个子路由时。
|
||||
由于`AdminModule`中`AdminComponent`中的`RouterLink`是一个空路径的路由，所以它会匹配到管理特性区的任何路由。但我们只有在访问`Dashboard`路由时才希望该链接被激活。所以我们往`Dashboard`这个routerLink上添加了另一个绑定`[routerLinkActiveOptions]="{ exact: true }"`，这样就只有当我们导航到`/admin`这个URL时才会激活它，而不会在导航到它的某个子路由时。
|
||||
|
||||
:marked
|
||||
The initial admin routing configuration:
|
||||
|
|
@ -3033,6 +3042,9 @@ a#can-activate-guard
|
|||
a#component-less-route
|
||||
:marked
|
||||
### Component-less route: grouping routes without a component
|
||||
|
||||
### 无组件路由: 不借助组件对路由进行分组
|
||||
|
||||
Looking at the child route under the `AdminComponent`, there is a `path` and a `children`
|
||||
property but it's not using a `component`.
|
||||
You haven't made a mistake in the configuration.
|
||||
|
|
@ -3079,7 +3091,7 @@ a#guard-admin-feature
|
|||
Instead you'll write a `CanActivate()` guard to redirect anonymous users to the
|
||||
login page when they try to enter the admin area.
|
||||
|
||||
我们换种方式：写一个`CanActivate`守卫，当匿名用户尝试访问管理组件时，把它/她重定向到登录页。
|
||||
我们换种方式：写一个`CanActivate()`守卫，当匿名用户尝试访问管理组件时，把它/她重定向到登录页。
|
||||
|
||||
This is a general purpose guard—you can imagine other features
|
||||
that require authenticated users—so you create an
|
||||
|
|
@ -3098,7 +3110,7 @@ a#guard-admin-feature
|
|||
Next, open `admin-routing.module.ts `, import the `AuthGuard` class, and
|
||||
update the admin route with a `CanActivate()` guard property that references it:
|
||||
|
||||
接下来，打开`crisis-center.routes.ts`，导入`AuthGuard`类，修改管理路由并通过`CanActivate`属性来引用`AuthGuard`：
|
||||
接下来，打开`crisis-center.routes.ts`，导入`AuthGuard`类，修改管理路由并通过`CanActivate()`守卫来引用`AuthGuard`：
|
||||
|
||||
+makeExcerpt('src/app/admin/admin-routing.module.2.ts (guarded admin route)', 'admin-route')
|
||||
|
||||
|
|
@ -3166,7 +3178,7 @@ a#teach-auth
|
|||
`false` just to be clear about that.
|
||||
|
||||
如果用户还没有登录，我们会用`RouterStateSnapshot.url`保存用户来自的URL并让路由器导航到登录页（我们尚未创建该页）。
|
||||
这间接导致路由器自动中止了这次导航，我们返回`false`并不是必须的，但这样可以更清楚的表达意图。
|
||||
这间接导致路由器自动中止了这次导航，`checkLogin()`返回`false`并不是必须的，但这样可以更清楚的表达意图。
|
||||
|
||||
a#add-login-component
|
||||
:marked
|
||||
|
|
@ -3240,6 +3252,9 @@ a#can-activate-child-guard
|
|||
a#can-deactivate-guard
|
||||
:marked
|
||||
### _CanDeactivate_: handling unsaved changes
|
||||
|
||||
### *CanDeactivate*：处理未保存的更改
|
||||
|
||||
Back in the "Heroes" workflow, the app accepts every change to a hero immediately without hesitation or validation.
|
||||
|
||||
回到“Heroes”工作流，该应用毫不犹豫的接受对英雄的任何修改，不作任何校验。
|
||||
|
|
@ -3932,6 +3947,8 @@ a#final-app
|
|||
|
||||
:marked
|
||||
## Wrap up and final app
|
||||
|
||||
## 总结与最终的应用
|
||||
|
||||
You've covered a lot of ground in this guide and the application is too big to reprint here.
|
||||
Please visit the <live-example title="Router Sample in Plunker"></live-example>
|
||||
|
|
@ -3944,6 +3961,7 @@ a#appendices
|
|||
|
||||
:marked
|
||||
## Appendices
|
||||
|
||||
## 附录
|
||||
|
||||
The balance of this guide is a set of appendices that
|
||||
|
|
|
|||
Loading…
Reference in New Issue