diff --git a/aio/content/guide/router.md b/aio/content/guide/router.md index a48b0e02c3..3c6bb52383 100644 --- a/aio/content/guide/router.md +++ b/aio/content/guide/router.md @@ -311,18 +311,24 @@ to get information from parent, child and sibling routes. ### 路由事件 -// TODO: Translate - During each navigation, the `Router` emits navigation events through the `Router.events` property. These events range from when the navigation starts and ends to many points in between. The full list of navigation events is displayed in the table below. +在每次导航中,`Router`都会通过`Router.events`属性发布一些导航事件。这些事件的范围涵盖了从开始导航到结束导航之间的很多时间点。下表中列出了全部导航事件: + @@ -334,6 +340,8 @@ During each navigation, the `Router` emits navigation events through the `Router An [event](api/router/NavigationStart) triggered when navigation starts. + 本[事件](api/router/NavigationStart)会在导航开始时触发。 + @@ -345,6 +353,8 @@ During each navigation, the `Router` emits navigation events through the `Router An [event](api/router/RoutesRecognized) triggered when the Router parses the URL and the routes are recognized. + 本[事件](api/router/RoutesRecognized)会在路由器解析完URL,并识别出了相应的路由时触发 + @@ -357,6 +367,8 @@ During each navigation, the `Router` emits navigation events through the `Router An [event](api/router/RouteConfigLoadStart) triggered before the `Router` [lazy loads](#asynchronous-routing) a route configuration. + 本[事件](api/router/RouteConfigLoadStart)会在`Router`对一个路由配置进行[惰性加载](#asynchronous-routing)之前触发。 + @@ -368,6 +380,8 @@ During each navigation, the `Router` emits navigation events through the `Router An [event](api/router/RouteConfigLoadEnd) triggered after a route has been lazy loaded. + 本[事件](api/router/RouteConfigLoadEnd)会在路由被惰性加载之后触发。 + @@ -379,6 +393,8 @@ During each navigation, the `Router` emits navigation events through the `Router An [event](api/router/NavigationEnd) triggered when navigation ends successfully. + 本[事件](api/router/NavigationEnd)会在导航成功结束之后触发。 + @@ -391,6 +407,9 @@ During each navigation, the `Router` emits navigation events through the `Router An [event](api/router/NavigationCancel) triggered when navigation is canceled. This is due to a [Route Guard](#guards) returning false during navigation. + 本[事件](api/router/NavigationCancel)会在导航被取消之后触发。 + 这可能是因为在导航期间某个[路由守卫](#guards)返回了`false`。 + @@ -402,12 +421,15 @@ During each navigation, the `Router` emits navigation events through the `Router An [event](api/router/NavigationError) triggered when navigation fails due to an unexpected error. + 这个[事件](api/router/NavigationError)会在导航由于意料之外的错误而失败时触发。 +
Router Event + + 路由器事件 + Description + + 描述 +
These events are logged to the console when the `enableTracing` option is enabled also. Since the events are provided as an `Observable`, you can `filter()` for events of interest and `subscribe()` to them to make decisions based on the sequence of events in the navigation process. +当打开了`enableTracing`选项时,这些事件也同时会记录到控制台中。由于这些事件是以`Observable`的形式提供的,所以我们可以对自己感兴趣的事件进行`filter()`,并`subscribe()`它们,以便根据导航过程中的事件顺序做出决策。 {@a basics-summary} diff --git a/aio/content/guide/structural-directives.md b/aio/content/guide/structural-directives.md index 02c62df3ed..cb49815163 100644 --- a/aio/content/guide/structural-directives.md +++ b/aio/content/guide/structural-directives.md @@ -593,6 +593,7 @@ We toggle the second into and out of the DOM with `ngIf`. That, in turn, can be desugared into the `` element form. +换句话说,可以把它"解语法糖",成为``元素的形式。 @@ -605,16 +606,21 @@ That, in turn, can be desugared into the `` element form. ## Prefer the asterisk (*) syntax. -// TODO: Translate +## 优先使用星号(`*`)语法 The asterisk (*) syntax is more clear than the other desugared forms. Use [<ng-container>](guide/structural-directives#ng-container) when there's no single element to host the directive. +星号(`*`)语法比不带语法糖的形式更加清晰。 +如果找不到单一的元素来应用该指令,可以使用[<ng-container>](guide/structural-directives#ng-container)作为该指令的容器。 + While there's rarely a good reason to apply a structural directive in template _attribute_ or _element_ form, it's still important to know that Angular creates a `` and to understand how it works. You'll refer to the `` when you [write your own structural directive](guide/structural-directives#unless). +虽然很少有理由在模板中使用结构型指令的*属性*形式和*元素*形式,但这些幕后知识仍然是很重要的,即:Angular会创建``,还要了解它的工作原理。 +当需要[写自己的结构型指令](guide/structural-directives#unless)时,我们就要使用``。 {@a template} @@ -622,14 +628,22 @@ You'll refer to the `` when you [write your own structural directiv ## The *<ng-template>* +## *<ng-template>*指令 + The <ng-template> is an Angular element for rendering HTML. It is never displayed directly. In fact, before rendering the view, Angular _replaces_ the `` and its contents with a comment. +<ng-template>是一个 Angular 元素,用来渲染HTML。 +它永远不会直接显示出来。 +事实上,在渲染视图之前,Angular 会把``及其内容*替换为*一个注释。 + If there is no structural directive and you merely wrap some elements in a ``, those elements disappear. That's the fate of the middle "Hip!" in the phrase "Hip! Hip! Hooray!". +如果没有使用结构型指令,而仅仅把一些别的元素包装进``中,那些元素就是不可见的。 +在下面的这个短语"Hip! Hip! Hooray!"中,中间的这个 "Hip!"(欢呼声) 就是如此。 @@ -639,9 +653,7 @@ That's the fate of the middle "Hip!" in the phrase "Hip! Hip! Hooray!". Angular erases the middle "Hip!", leaving the cheer a bit less enthusiastic. -借助内置的`ngOnInit`和`ngOnDestroy`[生命周期钩子](guide/lifecycle-hooks),我们同时记录了组件的创建或销毁过程。 -下面是它的操作演示: - +Angular 抹掉了中间的那个 "Hip!" ,让欢呼声显得不再那么热烈了。
template tag rendering @@ -652,6 +664,7 @@ Angular erases the middle "Hip!", leaving the cheer a bit less enthusiastic. A structural directive puts a `` to work as you'll see when you [write your own structural directive](guide/structural-directives#unless). +结构型指令会让``正常工作,在我们[写自己的结构型指令](guide/structural-directives#unless)时就会看到这一点。 {@a ngcontainer} @@ -662,9 +675,13 @@ as you'll see when you [write your own structural directive](guide/structural-di ## Group sibling elements with <ng-container> +## 使用<ng-container>把一些兄弟元素归为一组 + There's often a _root_ element that can and should host the structural directive. The list element (`
  • `) is a typical host element of an `NgFor` repeater. +通常都要有一个*根*元素作为结构型指令的数组。 +列表元素(`
  • `)就是一个典型的供`NgFor`使用的宿主元素。 @@ -675,6 +692,7 @@ The list element (`
  • `) is a typical host element of an `NgFor` repeater. When there isn't a host element, you can usually wrap the content in a native HTML container element, such as a `
    `, and attach the directive to that wrapper. +当没有这样一个单一的宿主元素时,我们可以把这些内容包裹在一个原生的HTML容器元素中,比如`
    `,并且把结构型指令附加到这个"包裹"上。 @@ -686,10 +704,14 @@ Introducing another container element—typically a `` or `
    `&mdas group the elements under a single _root_ is usually harmless. _Usually_ ... but not _always_. +但引入另一个容器元素(通常是``或`
    `)来把一些元素归到一个单一的*根元素*下,通常也会带来问题。注意,是"通常"而不是"总会"。 + The grouping element may break the template appearance because CSS styles neither expect nor accommodate the new layout. For example, suppose you have the following paragraph layout. +这种用于分组的元素可能会破坏模板的外观表现,因为CSS的样式既不曾期待也不会接受这种新的元素布局。 +比如,假设你有下列分段布局。 @@ -699,6 +721,7 @@ For example, suppose you have the following paragraph layout. You also have a CSS style rule that happens to apply to a `` within a `

    `aragraph. +而我们的CSS样式规则是应用于`

    `元素下的``的。 @@ -708,6 +731,7 @@ You also have a CSS style rule that happens to apply to a `` within a `

    The constructed paragraph renders strangely. +这样渲染出来的段落就会非常奇怪。

    spanned paragraph with bad style @@ -717,12 +741,18 @@ The constructed paragraph renders strangely. The `p span` style, intended for use elsewhere, was inadvertently applied here. +本来为其它地方准备的`p span`样式,被意外的应用到了这里。 + Another problem: some HTML elements require all immediate children to be of a specific type. For example, the ``元素要求直属下级必须为`