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