把所有“内建”改为“内置”
This commit is contained in:
Zhicheng Wang
parent
50f73986be
commit
6f6f89ed9c
|
|
@ -27,11 +27,11 @@ a(id="top")
|
|||
|
||||
* [Template directives](#template-directives) - built-in directives `ngIf` and `ngClass`.
|
||||
|
||||
* [模板指令](#template-directives) - 内建指令`ngIf`和`ngClass`。
|
||||
* [模板指令](#template-directives) - 内置指令`ngIf`和`ngClass`。
|
||||
|
||||
* [Filters/pipes](#filters-pipes) - built-in *filters*, known as *pipes* in Angular 2.
|
||||
|
||||
* [过滤器/管道](#filters-pipes) - 内建*过滤器(filter)*，在Angular 2中叫*管道(pipe)*。
|
||||
* [过滤器/管道](#filters-pipes) - 内置*过滤器(filter)*，在Angular 2中叫*管道(pipe)*。
|
||||
|
||||
* [Modules/controllers/components](#controllers-components) - *modules* in Angular 2 are slightly different from *modules* in Angular 1, and *controllers* are *components* in Angular 2.
|
||||
|
||||
|
|
@ -135,7 +135,7 @@ table(width="100%")
|
|||
built-in pipes in Angular 2.
|
||||
|
||||
在Angular 2中，我们使用相似的语法 —— 用管道字符(|)来过滤输出，但是现在直接把它叫做**管道**了。
|
||||
很多(但不是所有)Angular 1中的内建过滤器也成了Angular 2中的内建管道。
|
||||
很多(但不是所有)Angular 1中的内置过滤器也成了Angular 2中的内置管道。
|
||||
|
||||
For more information, see the heading [Filters/pipes](#Pipes) below.
|
||||
|
||||
|
|
@ -187,7 +187,7 @@ table(width="100%")
|
|||
Many of them aren't needed in Angular 2 because of its more capable and expressive binding system.
|
||||
The following are some of the key Angular 1 built-in directives and their equivalents in Angular 2.
|
||||
|
||||
Angular 1为模板提供了七十多个内建指令。
|
||||
Angular 1为模板提供了七十多个内置指令。
|
||||
在Angular 2中，它们很多都已经不需要了，因为Angular 2有了一个更加强大、快捷的绑定系统。
|
||||
下面是一些Angular 1中的关键指令及其在Angular 2中的等价物。
|
||||
|
||||
|
|
@ -401,7 +401,7 @@ table(width="100%")
|
|||
In Angular 2, you use property binding; there is no built-in *hide* directive.
|
||||
For more information, see [ng-show](#ng-show).
|
||||
|
||||
在Angular 2中，并没有一个内建的*hide*指令，可以改用属性绑定。
|
||||
在Angular 2中，并没有一个内置的*hide*指令，可以改用属性绑定。
|
||||
参见[ng-show](#ng-show)了解更多。
|
||||
|
||||
tr(style=top)
|
||||
|
|
@ -439,7 +439,7 @@ table(width="100%")
|
|||
Angular 2, uses property binding; there is no built-in *href* directive.
|
||||
Place the element's `href` property in square brackets and set it to a quoted template expression.
|
||||
|
||||
在Angular 2中，并没有内建的*href*指令，改用属性绑定。
|
||||
在Angular 2中，并没有内置的*href*指令，改用属性绑定。
|
||||
我们把元素的`href`属性放在方括号中，并把它设成一个引号中的模板表达式。
|
||||
|
||||
For more information on property binding, see [Template Syntax](../guide/template-syntax.html#property-binding).
|
||||
|
|
@ -587,7 +587,7 @@ table(width="100%")
|
|||
Angular 2, uses property binding; there is no built-in *show* directive.
|
||||
For hiding and showing elements, bind to the HTML `hidden` property.
|
||||
|
||||
在Angular 2中，并没有内建的*show*指令，可以改用属性绑定。
|
||||
在Angular 2中，并没有内置的*show*指令，可以改用属性绑定。
|
||||
要隐藏或显示一个元素，绑定到它的`hidden`属性就可以了。
|
||||
|
||||
To conditionally display an element, place the element's `hidden` property in square brackets and
|
||||
|
|
@ -627,7 +627,7 @@ table(width="100%")
|
|||
Angular 2, uses property binding; there is no built-in *src* directive.
|
||||
Place the `src` property in square brackets and set it to a quoted template expression.
|
||||
|
||||
在Angular 2中，并没有一个内建的*src*指令，可以使用属性绑定。
|
||||
在Angular 2中，并没有一个内置的*src*指令，可以使用属性绑定。
|
||||
把`src`属性放到方括号中，并且把它设为一个引号中的绑定表达式。
|
||||
|
||||
For more information on property binding, see [Template Syntax](../guide/template-syntax.html#property-binding).
|
||||
|
|
@ -758,7 +758,7 @@ a(id="filters-pipes")
|
|||
For more information on pipes, see [Pipes](../guide/pipes.html).
|
||||
|
||||
Angular 2中的**管道**为模板提供了格式化和数据转换功能，类似于Angular 1中的**过滤器**。
|
||||
Angular 1中的很多内建过滤器在Angular 2中都有对应的管道。
|
||||
Angular 1中的很多内置过滤器在Angular 2中都有对应的管道。
|
||||
要了解管道的更多信息，参见[Pipes](../guide/pipes.html)。
|
||||
|
||||
table(width="100%")
|
||||
|
|
|
|||
|
|
@ -427,7 +427,7 @@ block includes
|
|||
Angular registers some of its own providers with every injector.
|
||||
We can register our own providers.
|
||||
|
||||
Angular会为每个注册器注册很多Angular内建提供商。我们也可以注册自己的提供商。通常注册提供商的最佳时间是在应用程序开始[引导(Bootstrap)](#bootstrap)的时候。
|
||||
Angular会为每个注册器注册很多Angular内置提供商。我们也可以注册自己的提供商。通常注册提供商的最佳时间是在应用程序开始[引导(Bootstrap)](#bootstrap)的时候。
|
||||
当然，我们也有其它很多机会注册提供商。
|
||||
|
||||
Read more in the [Dependency Injection](!{docsLatest}/guide/dependency-injection.html) page.
|
||||
|
|
@ -800,7 +800,7 @@ a#N
|
|||
Here's an example that uses the built-in `currency` pipe to display
|
||||
a numeric value in the local currency.
|
||||
|
||||
下面这个例子中就用内建的`currency`管道把数字值显示成了本地货币格式。
|
||||
下面这个例子中就用内置的`currency`管道把数字值显示成了本地货币格式。
|
||||
|
||||
code-example(language="html" escape="html").
|
||||
<label>Price: </label>{{product.price | currency}}
|
||||
|
|
|
|||
|
|
@ -641,7 +641,7 @@ figure
|
|||
|
||||
The [example template](#templates) uses two built-in structural directives:
|
||||
|
||||
我们在[范例模板](#templates)中用到了两个内建的结构型指令。
|
||||
我们在[范例模板](#templates)中用到了两个内置的结构型指令。
|
||||
|
||||
+makeExcerpt('app/hero-list.component.1.html', 'structural')
|
||||
:marked
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ block includes
|
|||
can change several element styles at the same time.
|
||||
|
||||
*属性型*指令改变一个元素的外观或行为。
|
||||
比如，内建的[NgStyle](template-syntax.html#ngStyle)指令可以同时修改元素的多种样式。
|
||||
比如，内置的[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.
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ block includes
|
|||
.l-main-section
|
||||
:marked
|
||||
## Built-in pipes
|
||||
## 内建的管道
|
||||
## 内置的管道
|
||||
Angular comes with a stock of pipes such as
|
||||
`DatePipe`, `UpperCasePipe`, `LowerCasePipe`, `CurrencyPipe`, and `PercentPipe`.
|
||||
They are all immediately available for use in any template.
|
||||
|
|
@ -87,7 +87,7 @@ block includes
|
|||
Learn more about these and many other built-in pipes in the [API Reference](../api/#!?apiFilter=pipe);
|
||||
filter for entries that include the word "pipe".
|
||||
|
||||
要学习更多内建管道的知识，参见[API参考手册](../api/#!?apiFilter=pipe)，并用“pipe”为关键词对结果进行过滤。
|
||||
要学习更多内置管道的知识，参见[API参考手册](../api/#!?apiFilter=pipe)，并用“pipe”为关键词对结果进行过滤。
|
||||
|
||||
Angular 2 doesn't have a `FilterPipe` or an `OrderByPipe` for reasons explained in an [appendix below](#no-filter-pipe).
|
||||
|
||||
|
|
@ -251,7 +251,7 @@ figure.image-display
|
|||
要注意的有两点：
|
||||
1. We use our custom pipe the same way we use the built-in pipes.
|
||||
|
||||
1. 我们使用自定义管道的方式和内建管道完全相同。
|
||||
1. 我们使用自定义管道的方式和内置管道完全相同。
|
||||
|
||||
1. We must include our pipe in the `declarations` #{_array} of the AppModule.
|
||||
|
||||
|
|
@ -269,7 +269,7 @@ figure.image-display
|
|||
Custom pipes must be registered manually.
|
||||
|
||||
如果我们忘了列出这个自定义管道，Angular就会报告一个错误。
|
||||
在前一个例子中我们没有把`DatePipe`列进去，这是因为Angular所有的内建管道都已经预注册过了。
|
||||
在前一个例子中我们没有把`DatePipe`列进去，这是因为Angular所有的内置管道都已经预注册过了。
|
||||
但自定义管道必须手工注册。
|
||||
|
||||
|
||||
|
|
@ -636,7 +636,7 @@ figure.image-display
|
|||
and display them again, this time in JSON format by chaining through to the built-in `JsonPipe`.
|
||||
|
||||
第二个绑定除了用到`FetchPipe`之外还链接了更多管道。
|
||||
我们把获取数据的结果同时显示在第一个绑定和第二个绑定中。第二个绑定中，我们通过链接到一个内建管道`JsonPipe`把它转成了JSON格式。
|
||||
我们把获取数据的结果同时显示在第一个绑定和第二个绑定中。第二个绑定中，我们通过链接到一个内置管道`JsonPipe`把它转成了JSON格式。
|
||||
|
||||
.callout.is-helpful
|
||||
header Debugging with the json pipe
|
||||
|
|
@ -675,7 +675,7 @@ a(id="pure-pipe-pure-fn")
|
|||
A few steps back we reviewed the `FlyingHeroesImpurePipe` — *an impure pipe with a pure function*.
|
||||
|
||||
我们在本章前面见过的管道都是用纯函数实现的。
|
||||
内建的`DatePipe`就是一个用纯函数实现的纯管道。
|
||||
内置的`DatePipe`就是一个用纯函数实现的纯管道。
|
||||
`ExponentialStrengthPipe`是如此，
|
||||
`FlyingHeroesComponent`也是如此。
|
||||
不久前我们刚看过的`FlyingHeroesImpurePipe`，是一个*用纯函数实现的非纯管道*。
|
||||
|
|
@ -699,7 +699,7 @@ a(id="pure-pipe-pure-fn")
|
|||
Explore Angular's inventory of built-in pipes in the [API Reference](../api/#!?apiFilter=pipe).
|
||||
Try writing a custom pipe and perhaps contributing it to the community.
|
||||
|
||||
要浏览Angular的所有内建管道，请到[API参考手册](../api/#!?apiFilter=pipe)。
|
||||
要浏览Angular的所有内置管道，请到[API参考手册](../api/#!?apiFilter=pipe)。
|
||||
学着写写自定义管道，并贡献给开发社区。
|
||||
|
||||
a(id="no-filter-pipe")
|
||||
|
|
|
|||
|
|
@ -3600,7 +3600,7 @@ a#fragment
|
|||
Angular provides a built-in module loader that supports **`SystemJS`** to load modules asynchronously. If we were
|
||||
using another bundling tool, such as **Webpack**, we would use the Webpack mechanism for asynchronously loading modules.
|
||||
|
||||
Angular提供一个内建模块加载器，支持**`SystemJS`**来异步加载模块。如果我们使用其他捆绑工具比如**Webpack**，则使用Webpack的机制来异步加载模块。
|
||||
Angular提供一个内置模块加载器，支持**`SystemJS`**来异步加载模块。如果我们使用其他捆绑工具比如**Webpack**，则使用Webpack的机制来异步加载模块。
|
||||
|
||||
:marked
|
||||
We've built our feature area, we've updated our route configuration to take advantage of lazy-loading, now we have to do the final step
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ block includes
|
|||
scripting attacks. It does not cover application-level security, such as authentication (_Who is
|
||||
this user?_) or authorization (_What can this user do?_).
|
||||
|
||||
Web应用程序的安全涉及到很多方面。针对常见的漏洞和攻击，比如跨站脚本攻击，Angular提供了一些内建的保护措施。本章将讨论这些内建保护措施，但不会涉及应用级安全，比如用户认证（_这个用户是谁？_）和授权(_这个用户能做什么？_)。
|
||||
Web应用程序的安全涉及到很多方面。针对常见的漏洞和攻击，比如跨站脚本攻击，Angular提供了一些内置的保护措施。本章将讨论这些内置保护措施，但不会涉及应用级安全，比如用户认证（_这个用户是谁？_）和授权(_这个用户能做什么？_)。
|
||||
|
||||
For more information about the attacks and mitigations described below, see [OWASP Guide Project](https://www.owasp.org/index.php/Category:OWASP_Guide_Project).
|
||||
|
||||
|
|
@ -336,7 +336,7 @@ h2#http HTTP级别的漏洞
|
|||
forgery (CSRF or XSRF) and cross-site script inclusion (XSSI). Both of these must be mitigated primarily
|
||||
on the server side, but Angular ships helpers to make integration on the client side easier.
|
||||
|
||||
Angular内建了一些支持来防范两个常见的HTTP漏洞：跨站请求伪造（XSRF）和跨站脚本包含（XSSI）。
|
||||
Angular内置了一些支持来防范两个常见的HTTP漏洞：跨站请求伪造（XSRF）和跨站脚本包含（XSSI）。
|
||||
这两个漏洞主要在服务器端防范，但是Angular也自带了一些辅助特性，可以让客户端的集成变得更容易。
|
||||
|
||||
h3#xsrf Cross-site request forgery
|
||||
|
|
@ -371,7 +371,7 @@ h3#xsrf 跨站请求伪造（XSRF）
|
|||
`X-XSRF-TOKEN` with the value of that cookie on every request. The server must set the
|
||||
`XSRF-TOKEN` cookie and validate the response header for each state-modifying request.
|
||||
|
||||
Angular的`http`客户端具有对这项技术的内建支持。默认的`CookieXSRFStrategy`会寻找一个名叫`XSFR-TOKEN`的cookie。
|
||||
Angular的`http`客户端具有对这项技术的内置支持。默认的`CookieXSRFStrategy`会寻找一个名叫`XSFR-TOKEN`的cookie。
|
||||
在每个请求中，设置一个名为`X-XSRF-TOKEN`的HTTP请求头，并把该cookie的值赋给它。
|
||||
服务器必须设置`XSRF-TOKEN` cookie，并为每个会修改状态的请求验证请求头。
|
||||
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ block includes
|
|||
component property that requests such a sickening result.
|
||||
|
||||
[*属性型*指令](attribute-directives.html)会修改元素的外观或行为。
|
||||
比如，内建指令[NgStyle](template-syntax.html#ngStyle)就能同时修改元素的好几个样式。
|
||||
比如，内置指令[NgStyle](template-syntax.html#ngStyle)就能同时修改元素的好几个样式。
|
||||
通过绑定到组件的属性，我们可以把文本渲染成加粗、斜体、灰绿色这种肉麻的效果。
|
||||
|
||||
A *Structural* directive changes the DOM layout by adding and removing DOM elements.
|
||||
|
|
@ -67,7 +67,7 @@ block includes
|
|||
[ngSwitch](template-syntax.html#ngSwitch) and [ngFor](template-syntax.html#ngFor).
|
||||
|
||||
*结构型*指令通过添加和删除DOM元素来改变DOM的布局。
|
||||
我们会在其它章节看到三个内建的结构型指令：[ngIf](template-syntax.html#ngIf)、
|
||||
我们会在其它章节看到三个内置的结构型指令：[ngIf](template-syntax.html#ngIf)、
|
||||
[ngSwitch](template-syntax.html#ngSwitch)以及[ngFor](template-syntax.html#ngFor)。
|
||||
|
||||
+makeExample('structural-directives/ts/app/structural-directives.component.html', 'structural-directives')(format=".")
|
||||
|
|
@ -184,7 +184,7 @@ figure.image-display
|
|||
We should ask ourselves — and the users of our directives — to think carefully
|
||||
about the consequences of adding and removing elements and of creating and destroying components.
|
||||
|
||||
**同样的考量也适用于每一个结构型指令，无论是内建的还是自定义的。**
|
||||
**同样的考量也适用于每一个结构型指令，无论是内置的还是自定义的。**
|
||||
我们应该提醒自己以及我们指令的使用者，来仔细考虑添加元素、移除元素以及创建和销毁组件的后果。
|
||||
|
||||
Let's see these dynamics at work. For fun, we'll stack the deck *against*
|
||||
|
|
@ -209,7 +209,7 @@ figure.image-display
|
|||
using the built-in `ngOnInit` and `ngOnDestroy` [lifecycle hooks](lifecycle-hooks.html).
|
||||
Here it is in action:
|
||||
|
||||
借助内建的`ngOnInit`和`ngOnDestroy`[生命周期钩子](lifecycle-hooks.html)，我们同时记录了组件的创建或销毁过程。
|
||||
借助内置的`ngOnInit`和`ngOnDestroy`[生命周期钩子](lifecycle-hooks.html)，我们同时记录了组件的创建或销毁过程。
|
||||
下面是它的操作演示：
|
||||
|
||||
figure.image-display
|
||||
|
|
@ -423,7 +423,7 @@ block unless-intro
|
|||
we don't want to confuse our directives with their directives.
|
||||
|
||||
我们**并没有**给`unless`指令名加上**`ng`**前缀。
|
||||
那个前缀是属于Angular的，我们肯定不会希望自己的指令和Angular内建的指令冲突。
|
||||
那个前缀是属于Angular的，我们肯定不会希望自己的指令和Angular内置的指令冲突。
|
||||
|
||||
Our prefix is `my`.
|
||||
|
||||
|
|
|
|||
|
|
@ -2258,7 +2258,7 @@ a(href="#toc") 回到顶部
|
|||
:marked
|
||||
**Why?** This is consistent with built-in events such as button clicks.
|
||||
|
||||
**为何？**与内建事件命名一致，比如按钮点击。
|
||||
**为何？**与内置事件命名一致，比如按钮点击。
|
||||
|
||||
.s-why.s-why-last
|
||||
:marked
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ block includes
|
|||
* [Two-way data binding with `NgModel`](#ngModel)
|
||||
* [使用`NgModel`进行双向数据绑定](#ngModel)
|
||||
* [Built-in directives](#directives)
|
||||
* [内建指令](#directives)
|
||||
* [内置指令](#directives)
|
||||
* [NgClass](#ngClass)
|
||||
* [NgClass](#ngClass)
|
||||
* [NgStyle](#ngStyle)
|
||||
|
|
@ -1541,13 +1541,13 @@ figure.image-display
|
|||
:marked
|
||||
<a id="directives"></a>
|
||||
## Built-in directives
|
||||
## 内建指令
|
||||
## 内置指令
|
||||
|
||||
Earlier versions of Angular included over seventy built-in directives.
|
||||
The community contributed many more, and countless private directives
|
||||
have been created for internal applications.
|
||||
|
||||
前一个版本的Angular中包含了超过70个内建指令。
|
||||
前一个版本的Angular中包含了超过70个内置指令。
|
||||
社区贡献了更多，这还没算为内部应用而创建的无数私有指令。
|
||||
|
||||
We don’t need many of those directives in Angular 2.
|
||||
|
|
@ -1564,12 +1564,12 @@ figure.image-display
|
|||
We'll write our own directives, just not as many.
|
||||
|
||||
我们仍然可以从简化复杂任务的指令中获益。
|
||||
Angular发布时仍然带有内建指令，只是没那么多了。
|
||||
Angular发布时仍然带有内置指令，只是没那么多了。
|
||||
我们仍会写自己的指令，只是没那么多了。
|
||||
|
||||
This segment reviews some of the most frequently used built-in directives.
|
||||
|
||||
下面这部分就检阅一下那些最常用的内建指令。
|
||||
下面这部分就检阅一下那些最常用的内置指令。
|
||||
|
||||
<a id="ngClass"></a>
|
||||
.l-main-section
|
||||
|
|
@ -1941,7 +1941,7 @@ figure.image-display
|
|||
## `*`与<template>
|
||||
When we reviewed the `NgFor`, `NgIf`, and `NgSwitch` built-in directives, we called out an oddity of the syntax: the asterisk (`*`) that appears before the directive names.
|
||||
|
||||
当我们审视`NgFor`、`NgIf`和`NgSwitch`内建指令时，我们使用了一种古怪的语法：出现在指令名称前面的星号(`*`)。
|
||||
当我们审视`NgFor`、`NgIf`和`NgSwitch`内置指令时，我们使用了一种古怪的语法：出现在指令名称前面的星号(`*`)。
|
||||
|
||||
The `*` is a bit of syntactic sugar that makes it easier to read and write directives that modify HTML layout
|
||||
with the help of templates.
|
||||
|
|
@ -2144,7 +2144,7 @@ figure.image-display
|
|||
track the validity of user input.
|
||||
|
||||
如果Angular没有接管它，那它可能是个[HTMLFormElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement)。
|
||||
实际上它是个`ngForm`，一个对Angular内建指令`NgForm`的引用。它包装了原生的`HTMLFormElement`并赋予它额外的“超能力”，比如跟踪用户输入的有效性。
|
||||
实际上它是个`ngForm`，一个对Angular内置指令`NgForm`的引用。它包装了原生的`HTMLFormElement`并赋予它额外的“超能力”，比如跟踪用户输入的有效性。
|
||||
|
||||
This explains how we can disable the submit button by checking `theForm.form.valid`
|
||||
and pass an object with rich information to the parent component's `onSubmit` method.
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ include ../_util-fns
|
|||
Angular 2 platform.
|
||||
|
||||
已经有了一个Angular 1的程序并不表示我们就不能享受Angular 2提供的一切。
|
||||
这是因为Angular 2带来了一些内建工具，来帮助我们把Angular 1的项目迁移到Angular 2平台。
|
||||
这是因为Angular 2带来了一些内置工具，来帮助我们把Angular 1的项目迁移到Angular 2平台。
|
||||
|
||||
Some applications will be easier to upgrade than others, and there are
|
||||
ways in which we can make it easier for ourselves. It is possible to
|
||||
|
|
@ -1068,7 +1068,7 @@ figure
|
|||
we need some of Angular 1's built-in services like `$location` or `$timeout`.
|
||||
|
||||
当运行一个混合式应用时，我们可能会遇到这种情况：我们需要把某些Angular 1的依赖注入到Angular 2代码中。
|
||||
这可能是因为某些业务逻辑仍然在Angular 1服务中，或者需要某些Angular 1的内建服务，比如`$location`或`$timeout`。
|
||||
这可能是因为某些业务逻辑仍然在Angular 1服务中，或者需要某些Angular 1的内置服务，比如`$location`或`$timeout`。
|
||||
|
||||
In these situations, it is possible to *upgrade* an Angular 1 provider to
|
||||
Angular 2. This makes it possible to then inject it somewhere in Angular 2
|
||||
|
|
@ -1899,7 +1899,7 @@ code-example(format="").
|
|||
where the current filtering and ordering has been applied.
|
||||
|
||||
我们在这里做的另一件事就是移除了`filter`和`orderBy`过滤器的使用，并把它们换成对控制器中`getPhones()`方法的调用。
|
||||
内建的`filter`和`orderBy`在Angular 2中已经不存在了，所以我们得自己进行过滤和排序。
|
||||
内置的`filter`和`orderBy`在Angular 2中已经不存在了，所以我们得自己进行过滤和排序。
|
||||
我们可以为此定义自己的Angular 2管道，但是在这个案例中，在组件本身实现过滤和排序逻辑反倒更方便。
|
||||
我们希望`getPhones()`方法直接返回一个应用过当前过滤和排序规则的集合。
|
||||
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ include ../_util-fns
|
|||
format data with pipes. We'll create a shared service to assemble our heroes. And we'll use routing to navigate among different views and their components.
|
||||
|
||||
这篇《英雄指南》覆盖了Angular的核心原理。
|
||||
我们将使用内建指令来显示/隐藏元素，并且显示英雄数据的列表。
|
||||
我们将使用内置指令来显示/隐藏元素，并且显示英雄数据的列表。
|
||||
我们将创建一个组件来显示英雄的详情，另一个组件则用来显示英雄列表。
|
||||
我们将对只读数据使用单向数据绑定。我们将添加一些可编辑字段，并通过双向数据绑定更新模型。
|
||||
我们将把组件上的方法绑定到用户事件上，比如按键和点击。
|
||||
|
|
|
|||
|
|
@ -253,7 +253,7 @@ code-example(language="bash").
|
|||
:marked
|
||||
Let's update the template to use the **`ngModel`** built-in directive for two-way binding.
|
||||
|
||||
接下来更新模板，加入用于双向绑定的内建指令**`ngModel`**。
|
||||
接下来更新模板，加入用于双向绑定的内置指令**`ngModel`**。
|
||||
|
||||
Replace the `<input>` with the following HTML
|
||||
|
||||
|
|
@ -290,7 +290,7 @@ code-example(language="html").
|
|||
* We can both display and change the hero’s name after adding a two-way data binding to the `<input>` element
|
||||
using the built-in `ngModel` directive.
|
||||
|
||||
* 为了同时显示和修改英雄的名字，我们还使用了内建的`ngModel`指令，往`<input>`元素上添加了双向数据绑定。
|
||||
* 为了同时显示和修改英雄的名字，我们还使用了内置的`ngModel`指令，往`<input>`元素上添加了双向数据绑定。
|
||||
|
||||
* The `ngModel` directive also propagates changes to every other binding of the `hero.name`.
|
||||
|
||||
|
|
|
|||
|
|
@ -149,7 +149,7 @@ code-example(language="bash").
|
|||
|
||||
First modify the `<li>` tag by adding the built-in directive `*ngFor`.
|
||||
|
||||
首先，修改`<li>`标签，往上添加内建指令：`*ngFor`。
|
||||
首先，修改`<li>`标签，往上添加内置指令：`*ngFor`。
|
||||
|
||||
+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'heroes-ngfor-1', 'app.component.ts (ngFor)')
|
||||
|
||||
|
|
@ -385,7 +385,7 @@ code-example(language="bash").
|
|||
We wrap the HTML hero detail content of our template with a `<div>`.
|
||||
Then we add the `ngIf` built-in directive and set it to the `selectedHero` property of our component.
|
||||
|
||||
我们把模板中的“英雄详情”内容区用div包裹起来。然后往上添加一个`ngIf`内建指令，然后把`ngIf`的值设置为本组件的`selectedHero`属性。
|
||||
我们把模板中的“英雄详情”内容区用div包裹起来。然后往上添加一个`ngIf`内置指令，然后把`ngIf`的值设置为本组件的`selectedHero`属性。
|
||||
|
||||
+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'ng-if', 'app.component.ts (ngIf)')
|
||||
|
||||
|
|
@ -522,7 +522,7 @@ code-example(language="bash").
|
|||
|
||||
* We learned how to use the built-in directives `ngIf` and `ngFor` in a component’s template
|
||||
|
||||
* 我们学会了如何在组件模板中使用内建的`ngIf`和`ngFor`指令
|
||||
* 我们学会了如何在组件模板中使用内置的`ngIf`和`ngFor`指令
|
||||
|
||||
Run the <live-example></live-example> for this part.
|
||||
|
||||
|
|
|
|||
|
|
@ -76,6 +76,6 @@ div
|
|||
h3 Accessibility
|
||||
h3 可访问性
|
||||
p(class="text-body") Create accessible applications with ARIA-enabled components, developer guides, and built-in a11y test infrastructure.
|
||||
p(class="text-body") 通过支持ARIA的组件、开发者指南和内建的一体化测试基础设施，创建具有完备可访问性的应用。
|
||||
p(class="text-body") 通过支持ARIA的组件、开发者指南和内置的一体化测试基础设施，创建具有完备可访问性的应用。
|
||||
|
||||
!= partial("/_includes/_cta-bar")
|
||||
|
|
|
|||
Loading…
Reference in New Issue