修正一些合并中的问题
This commit is contained in:
Zhicheng Wang
parent
64f6b9e34a
commit
aadbeb3ae9
@ -992,7 +992,8 @@ include _util-fns
|
||||
[XHR](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest)
|
||||
calls to remote servers.
|
||||
|
||||
浏览器DOM和JavaScript之间有一些有限数量的异步活动，比如Dom事件（比如点击）、[契约promises](#promise)、和[XHR](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest)查询远程服务等。
|
||||
浏览器DOM和JavaScript之间有一些有限数量的异步活动，比如Dom事件（比如点击）、[承诺promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/
|
||||
Promise)、和[XHR](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest)查询远程服务等。
|
||||
|
||||
Zones intercept all of these activities and give a "zone client" the opportunity
|
||||
to take action before and after the async activity completes.
|
||||
|
||||
@ -101,14 +101,8 @@
|
||||
|
||||
|
||||
"router-deprecated": {
|
||||
"title": "Router (Deprecated Beta)",
|
||||
"intro": "The deprecated Beta Router."
|
||||
},
|
||||
|
||||
"router": {
|
||||
"title": "路由与导航",
|
||||
"intro": "揭示通过Angular 2路由在屏幕上导航的基本原理。",
|
||||
"hide": true
|
||||
"title": "路由 (Beta版，已废弃)",
|
||||
"intro": "废弃的Beta版路由"
|
||||
},
|
||||
|
||||
"structural-directives": {
|
||||
@ -132,8 +126,8 @@
|
||||
},
|
||||
|
||||
"webpack": {
|
||||
"title": "Introduction to Webpack",
|
||||
"intro": "Create your Angular 2 applications with a Webpack based tooling"
|
||||
"title": "Webpack简介",
|
||||
"intro": "使用基于Webpack的工具创建Angular 2应用"
|
||||
},
|
||||
|
||||
"glossary": {
|
||||
|
||||
@ -20,7 +20,7 @@ block includes
|
||||
* [使用数据绑定把值传到指令中](#bindings)
|
||||
|
||||
p.
|
||||
#[+liveExampleLink2('Live example', 'attribute-directives')].
|
||||
#[+liveExampleLink2('在线例子', 'attribute-directives')].
|
||||
:marked
|
||||
## Directives overview
|
||||
## 指令概览
|
||||
@ -45,14 +45,14 @@ p.
|
||||
[NgFor](template-syntax.html#ngFor) and [NgIf](template-syntax.html#ngIf) are two familiar examples.
|
||||
|
||||
[*结构型*指令](structural-directives.html)会通过添加/删除DOM元素来更改DOM树布局。
|
||||
[NgFor](template-syntax.html#ng-for)和[NgIf](template-syntax.html#ng-if)就是两个最熟悉的例子。
|
||||
[NgFor](template-syntax.html#ngFor)和[NgIf](template-syntax.html#ngIf)就是两个最熟悉的例子。
|
||||
|
||||
An *Attribute* directive can change the appearance or behavior of an element.
|
||||
The built-in [NgStyle](template-syntax.html#ngStyle) directive, for example,
|
||||
can change several element styles at the same time.
|
||||
|
||||
*Attribute型*指令改变一个元素的外观或行为。
|
||||
比如，内建的[NgStyle](template-syntax.html#ng-style)指令可以同时修改元素的多种样式。
|
||||
比如，内建的[NgStyle](template-syntax.html#ngStyle)指令可以同时修改元素的多种样式。
|
||||
|
||||
We are going to write our own attribute directive to set an element's background color
|
||||
when the user hovers over that element.
|
||||
@ -116,7 +116,7 @@ block highlight-directive-1
|
||||
so we can access the DOM element.
|
||||
We don't need `Input` immediately but we will need it later in the chapter.
|
||||
|
||||
我们先从Angular库中导入一些符号。
|
||||
我们先从Angular的`core`库中导入一些符号。
|
||||
我们要为使用`@Directive`装饰器而导入`Directive`。
|
||||
我们要为[注入](dependency-injection.html)到指令的构造函数中而导入`ElementRef`，这样我们才能访问DOM元素。
|
||||
虽然眼下还不需要`Input`，但在稍后的章节中我们很快就会用到它。
|
||||
@ -225,7 +225,7 @@ p
|
||||
|
||||
We run the app and see that our directive highlights the paragraph text.
|
||||
|
||||
运行应用，就会看到我们的指令确实高亮了span中的文本。
|
||||
运行应用，就会看到我们的指令确实高亮了段落中的文本。
|
||||
|
||||
figure.image-display
|
||||
img(src="/resources/images/devguide/attribute-directives/first-highlight.png" alt="First Highlight")
|
||||
@ -284,14 +284,14 @@ a#respond-to-user
|
||||
1. detect when the user hovers into and out of the element,
|
||||
1. 检测用户的鼠标啥时候进入和离开这个元素。
|
||||
1. respond to those actions by setting and clearing the highlight color, respectively.
|
||||
1. 通过设置和清除高亮的颜色来响应这些操作。
|
||||
1. 通过设置和清除高亮色来响应这些操作。
|
||||
|
||||
Let's start with event detection.
|
||||
Add a `host` property to the directive metadata and give it a configuration object
|
||||
that specifies two mouse events and the directive methods to call when they are raised:
|
||||
|
||||
从事件检测开始吧。
|
||||
我们把`host`属性加入指令的元数据中，并给它一个配置对象，用来指定两个鼠标事件，并在它们被触发时，调用指令中的方法。
|
||||
我们把`host`属性加入指令的元数据中，并给它一个配置对象，用来指定两个鼠标事件，并在它们被触发时，调用指令中的方法：
|
||||
+makeExample('attribute-directives/ts/app/highlight.directive.2.ts','host')(format=".")
|
||||
|
||||
.l-sub-section
|
||||
@ -303,7 +303,7 @@ a#respond-to-user
|
||||
We could have attached event listeners by manipulating the host DOM element directly, but
|
||||
there are at least three problems with such an approach:
|
||||
|
||||
我们可以通过老旧的JavaScript方式来给这个原生元素(`el.nativeElement`)挂上一个事件监听器。
|
||||
我们可以通过直接操纵DOM元素的方式给宿主DOM元素挂上一个事件监听器。
|
||||
但这种方法至少有三个问题：
|
||||
1. We have to write the listeners correctly.
|
||||
1. 我们必须正确的书写事件监听器。
|
||||
@ -337,7 +337,7 @@ a#respond-to-user
|
||||
We run the app and confirm that the background color appears as we move the mouse over the `p` and
|
||||
disappears as we move out.
|
||||
|
||||
运行本应用，我们就可以确认：当把鼠标移到`span`上的时候，背景色就出现了，而移开的时候，它消失了。
|
||||
运行本应用，我们就可以确认：当把鼠标移到`p`上的时候，背景色就出现了，而移开的时候，它消失了。
|
||||
figure.image-display
|
||||
img(src="/resources/images/devguide/attribute-directives/highlight-directive-anim.gif" alt="Second Highlight")
|
||||
.l-main-section
|
||||
@ -350,7 +350,7 @@ a#bindings
|
||||
We should set the color externally with a binding like this:
|
||||
|
||||
现在的高亮颜色是在指令中硬编码进去的。这样没有弹性。
|
||||
我们应该通过绑定从外部设置这个高亮颜色。就像这样：
|
||||
我们应该通过绑定从外部设置这个颜色。就像这样：
|
||||
+makeExample('attribute-directives/ts/app/app.component.html','pHost')
|
||||
:marked
|
||||
We'll extend our directive class with a bindable **input** `highlightColor` property and use it when we highlight text.
|
||||
@ -376,7 +376,7 @@ a#input
|
||||
We must add this input metadata or Angular will reject the binding.
|
||||
See the [appendix](#why-input) below to learn why.
|
||||
|
||||
这个`@Input`装饰器把元数据添加到了类上，这让`highlightColor`能被以`myHighlight`为别名进行绑定。
|
||||
`@Input`把元数据添加到了类上，这让`highlightColor`能被以`myHighlight`为别名进行绑定。
|
||||
我们必须添加这个input元数据，否则Angular会拒绝绑定。
|
||||
参见下面的[附录](#why-input)来了解为何如此。
|
||||
.l-sub-section
|
||||
|
||||
@ -52,9 +52,7 @@ table(width="100%")
|
||||
A step-by-step, immersive approach to learning Angular that
|
||||
introduces the major features of Angular in an application context.
|
||||
|
||||
一场按部就班、沉浸式的Angular学习之旅。
|
||||
从[“快速起步”](../quickstart.html)开始，本文档中的每一个章节和范例，都基于一个[*英雄指南* 教程](../tutorial)，
|
||||
它会在一个假想的应用场景中逐步引出Angular的各个主要特性。
|
||||
一场按部就班、沉浸式的Angular学习之旅，在一个应用场景中介绍了Angular的各个主要特性。
|
||||
tr(style=top)
|
||||
td
|
||||
p <b>Basics</b>
|
||||
@ -197,7 +195,7 @@ block example-links
|
||||
|
||||
The [API Reference](../api/) is the authority on every public-facing member of the Angular libraries.
|
||||
|
||||
[API指南](../api/)是关于Angular库中每一个公有成员的权威指南。
|
||||
[API参考](../api/)是关于Angular库中每一个公有成员的权威参考资料。
|
||||
|
||||
# Feedback
|
||||
# 提供反馈
|
||||
|
||||
@ -2613,7 +2613,8 @@ a(href="#toc") Back to top
|
||||
.s-why.s-why-last
|
||||
:marked
|
||||
**Why?** We avoid unintentionally not calling the hook if we misspell the method.
|
||||
|
||||
|
||||
**为何？**避免在方法名字拼写错误时，造成无意间没有调用钩子的可能。
|
||||
+makeExample('style-guide/ts/09-01/app/heroes/shared/hero-button/hero-button.component.avoid.ts', 'example', 'app/heroes/shared/hero-button/hero-button.component.ts')(avoid=1)
|
||||
:marked
|
||||
|
||||
|
||||
@ -856,7 +856,7 @@ block project-files
|
||||
created a simple `index.html`, and launched with a
|
||||
static file server. That's about all we'd expect to do for a "Hello, World" app.
|
||||
|
||||
我们让自己的Angular 2处女航保持简单：我们写一个小的Angular组件，添加一些JavaScript库到`index.html`，并且启动一个静态文件服务器。
|
||||
我们让自己的Angular 2处女航保持简单：我们写了一个小的Angular组件，添加一些JavaScript库到`index.html`，并且启动一个静态文件服务器。
|
||||
这就是我们想通过“Hello, World”应用去表现的一切。
|
||||
|
||||
**We have greater ambitions!**
|
||||
@ -868,7 +868,7 @@ block what-next-ts-overhead
|
||||
We'll probably only touch the `package.json` to update libraries.
|
||||
We'll likely open `index.html` only if we need to add a library or some css stylesheets.
|
||||
|
||||
好消息是：准备阶段已经结束了。
|
||||
好消息是：准备阶段（几乎）已经结束了。
|
||||
我们将来可能只是修改`package.json`来升级依赖库。
|
||||
如果需要添加一些库或一些css样式表，我们可以打开`index.html`。
|
||||
:marked
|
||||
|
||||
@ -29,7 +29,7 @@ figure.image-display
|
||||
The [Routing and Navigation](../guide/router-deprecated.html) chapter covers the router in more detail
|
||||
than we will in this tour.
|
||||
|
||||
[路由与导航](../guide/router.html)一章覆盖了比该教程中更详细的路由知识。
|
||||
[路由与导航](../guide/router-deprecated.html)一章覆盖了比该教程中更详细的路由知识。
|
||||
:marked
|
||||
[Run the live example](/resources/live-examples/toh-5/ts/plnkr.html).
|
||||
|
||||
@ -525,13 +525,13 @@ code-example(format="." language="bash").
|
||||
+makeExample('toh-5/ts/app/dashboard.component.2.ts','component', 'app/dashboard.component.ts (类)')
|
||||
:marked
|
||||
We saw this kind of logic before in the `HeroesComponent`.
|
||||
* create a `heroes` array property
|
||||
* inject the `HeroService` in the constructor and hold it in a private `heroService` field.
|
||||
* call the service to get heroes inside the Angular `ngOnInit` lifecycle hook.
|
||||
|
||||
在`HeroesComponent`之前，我们也看到过类似的逻辑：
|
||||
* create a `heroes` array property
|
||||
* 创建一个`heroes`数组属性
|
||||
* 把`HeroService`注入构造函数中，并且把它保存在一个私有的`_heroService`字段中。
|
||||
* inject the `HeroService` in the constructor and hold it in a private `heroService` field.
|
||||
* 把`HeroService`注入构造函数中，并且把它保存在一个私有的`heroService`字段中。
|
||||
* call the service to get heroes inside the Angular `ngOnInit` lifecycle hook.
|
||||
* 在Angular的`ngOnInit`生命周期钩子中调用这个服务，并且取得英雄列表。
|
||||
|
||||
The noteworthy differences: we cherry-pick four heroes (2nd, 3rd, 4th, and 5th) with *slice*
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user