From 9db69011c39fd4e0b545e4f71429dadb78227f0f Mon Sep 17 00:00:00 2001 From: Zhicheng Wang Date: Sat, 15 Apr 2017 22:15:28 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E8=AE=A2=E5=AE=8Crouter?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/docs/ts/latest/guide/router.jade | 42 ++++++++++++++++++------- 1 file changed, 30 insertions(+), 12 deletions(-) diff --git a/public/docs/ts/latest/guide/router.jade b/public/docs/ts/latest/guide/router.jade index c67f8bf01c..a014c376b9 100644 --- a/public/docs/ts/latest/guide/router.jade +++ b/public/docs/ts/latest/guide/router.jade @@ -1877,6 +1877,8 @@ a#hero-detail-ctor a#reuse :marked #### Observable params and component reuse + + #### 参数的可观察对象（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 @@ -3944,6 +3961,7 @@ a#appendices :marked ## Appendices + ## 附录 The balance of this guide is a set of appendices that