"translation":"### none\n ### 没了\n For performance reasons, no comparable pipe exists in Angular. Do all your filtering in the component. If you need the same filtering code in several templates, consider building a custom pipe.",
"original":"### none\n ### 没了\n For performance reasons, no comparable pipe exists in Angular. Do all your filtering in the component. If you need the same filtering code in several templates, consider building a custom pipe.",
"original":"For performance reasons, no comparable pipe exists in Angular. Do all your filtering in the component. If you need the same filtering code in several templates, consider building a custom pipe.",
"translation":"### none\n ### 没了\n For performance reasons, no comparable pipe exists in Angular.\n Instead, use component code to order or sort results. If you need the same ordering or sorting code in several templates, consider building a custom pipe.",
"original":"### none\n ### 没了\n For performance reasons, no comparable pipe exists in Angular.\n Instead, use component code to order or sort results. If you need the same ordering or sorting code in several templates, consider building a custom pipe.",
"original":"For performance reasons, no comparable pipe exists in Angular.\n Instead, use component code to order or sort results. If you need the same ordering or sorting code in several templates, consider building a custom pipe.",
"original":"See the [CLI documentation](https://github.com/angular/angular-cli/wiki) for details, especially the [`build` topic](https://github.com/angular/angular-cli/wiki/build).",
"translation":"You install them with the **npm** package manager and import parts of them with JavaScript `import` statements.\n用 **npm** 包管理工具安装它们，用 JavaScript 的`import`语句导入其中某些部件。<br class=\"clear\">",
"original":"You install them with the **npm** package manager and import parts of them with JavaScript `import` statements.",
"original":"To use the new `HighlightDirective`, add a paragraph (`<p>`) element to the template of the root `AppComponent` and apply the directive as an attribute.",
"original":"Begin by adding `Input` to the list of symbols imported from `@angular/core`.\n<code-example path=\"attribute-directives/src/app/highlight.directive.3.ts\" linenums=\"false\" title=\"src/app/highlight.directive.ts (imports)\" region=\"imports\"></code-example>",
"original":"Begin by adding `Input` to the list of symbols imported from `@angular/core`.",
"original":"## All mention of moduleId removed. \"Component relative paths\" guide deleted (2017-03-13)",
"translation":"## 移除了所有的moduleId引用。移除了“组件相对路径” 的烹饪书。(2017-03-13)\nWe added a new SystemJS plugin (systemjs-angular-loader.js) to our recommended SystemJS configuration.\nThis plugin dynamically converts \"component-relative\" paths in templateUrl and styleUrls to \"absolute paths\" for you.",
"original":"## 移除了所有的moduleId引用。移除了“组件相对路径” 的烹饪书。(2017-03-13)\nWe added a new SystemJS plugin (systemjs-angular-loader.js) to our recommended SystemJS configuration.\nThis plugin dynamically converts \"component-relative\" paths in templateUrl and styleUrls to \"absolute paths\" for you.",
"original":"We added a new SystemJS plugin (systemjs-angular-loader.js) to our recommended SystemJS configuration.\nThis plugin dynamically converts \"component-relative\" paths in templateUrl and styleUrls to \"absolute paths\" for you.",
"original":"The updated TypeScript to JavaScript guide explains how to write apps in ES6/7",
"translation":"更新了“[从TypeScript到JavaScript](guide/ts-to-js)”烹饪宝典，解释如何使用ES6/7编写应用\nby translating the common idioms in the TypeScript documentation examples\n(and elsewhere on the web) to ES6/7 and ES5.",
"original":"更新了“[从TypeScript到JavaScript](guide/ts-to-js)”烹饪宝典，解释如何使用ES6/7编写应用\nby translating the common idioms in the TypeScript documentation examples\n(and elsewhere on the web) to ES6/7 and ES5.",
"original":"by translating the common idioms in the TypeScript documentation examples\n(and elsewhere on the web) to ES6/7 and ES5.",
"original":"[StyleGuide](guide/styleguide) explains recommended conventions for NgModules.",
"translation":"[StyleGuide](guide/styleguide)解释了我们为Angular模块（NgModule）而推荐的约定。\nBarrels now are far less useful and have been removed from the style guide;\nthey remain valuable but are not a matter of Angular style.\nAlso relaxed the rule that discouraged use of the `@Component.host` property.",
"original":"[StyleGuide](guide/styleguide)解释了我们为Angular模块（NgModule）而推荐的约定。\nBarrels now are far less useful and have been removed from the style guide;\nthey remain valuable but are not a matter of Angular style.\nAlso relaxed the rule that discouraged use of the `@Component.host` property.",
"original":"Barrels now are far less useful and have been removed from the style guide;\nthey remain valuable but are not a matter of Angular style.\nAlso relaxed the rule that discouraged use of the `@Component.host` property.",
"translation":"<div id=\"cheatsheet\">\n<table class=\"is-full-width is-fixed-layout\">\n<tbody><tr>\n<th>\n<p>Bootstrapping</p>\n<p>启动</p>\n</th>\n<th><p><code>import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';</code>\n</p>\n</th>\n</tr>\n<tr>\n<td><code><b>platformBrowserDynamic().bootstrapModule</b>(AppModule);</code></td>\n<td><p>Bootstraps the app, using the root component from the specified <code>NgModule</code>. </p>\n<p>用 <code>NgModule</code> 中指定的根组件进行启动。</p>\n</td>\n</tr>\n</tbody></table>",
"original":"<div id=\"cheatsheet\">",
"translation":"<table class=\"is-full-width is-fixed-layout\">\n<tbody><tr>\n<th>\n<p>Bootstrapping</p>\n<p>启动</p>\n</th>\n<th><p><code>import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';</code>\n</p>\n</th>\n</tr>\n<tr>\n<td><code><b>platformBrowserDynamic().bootstrapModule</b>(AppModule);</code></td>\n<td><p>Bootstraps the app, using the root component from the specified <code>NgModule</code>. </p>\n<p>用 <code>NgModule</code> 中指定的根组件进行启动。</p>\n</td>\n</tr>\n</tbody></table>",
"original":"<div id=\"cheatsheet\">\n<table class=\"is-full-width is-fixed-layout\">\n<tbody><tr>\n<th>\n<p>Bootstrapping</p>\n<p>启动</p>\n</th>\n<th><p><code>import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';</code>\n</p>\n</th>\n</tr>\n<tr>\n<td><code><b>platformBrowserDynamic().bootstrapModule</b>(AppModule);</code></td>\n<td><p>Bootstraps the app, using the root component from the specified <code>NgModule</code>. </p>\n<p>用 <code>NgModule</code> 中指定的根组件进行启动。</p>\n</td>\n</tr>\n</tbody></table>",
"original":"<table class=\"is-full-width is-fixed-layout\">\n<tbody><tr>\n<th>\n<p>Bootstrapping</p>\n<p>启动</p>\n</th>\n<th><p><code>import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';</code>\n</p>\n</th>\n</tr>\n<tr>\n<td><code><b>platformBrowserDynamic().bootstrapModule</b>(AppModule);</code></td>\n<td><p>Bootstraps the app, using the root component from the specified <code>NgModule</code>. </p>\n<p>用 <code>NgModule</code> 中指定的根组件进行启动。</p>\n</td>\n</tr>\n</tbody></table>",
"translation":"<table class=\"is-full-width is-fixed-layout\">\n<tbody><tr>\n<th><p>NgModules</p>\n<p>Angular 模块</p>\n</th>\n<th><p><code>import { NgModule } from '@angular/core';</code>\n</p>\n</th>\n</tr>\n<tr>\n<td><code>@<b>NgModule</b>({ declarations: ..., imports: ...,<br> exports: ..., providers: ..., bootstrap: ...})<br>class MyModule {}</code></td>\n<td><p>Defines a module that contains components, directives, pipes, and providers.</p>\n<p>定义一个模块，其中可以包含组件、指令、管道和服务提供商。</p>\n</td>\n</tr><tr>\n<td><code><b>declarations:</b> [MyRedComponent, MyBlueComponent, MyDatePipe]</code></td>\n<td><p>List of components, directives, and pipes that belong to this module.</p>\n<p>属于当前模块的组件、指令和管道的列表。</p>\n</td>\n</tr><tr>\n<td><code><b>imports:</b> [BrowserModule, SomeOtherModule]</code></td>\n<td><p>List of modules to import into this module. Everything from the imported modules\nis available to <code>declarations</code> of this module.</p>\n<p>本模块所导入的模块列表</p>\n</td>\n</tr><tr>\n<td><code><b>exports:</b> [MyRedComponent, MyDatePipe]</code></td>\n<td><p>List of components, directives, and pipes visible to modules that import this module.</p>\n<p>那些导入了本模块的模块所能看到的组件、指令和管道的列表</p>\n</td>\n</tr><tr>\n<td><code><b>providers:</b> [MyService, { provide: ... }]</code></td>\n<td><p>List of dependency injection providers visible both to the contents of this module and to importers of this module.</p>\n<p>依赖注入提供商的列表，本模块以及本模块导入的所有模块中的内容都可以看见它们。</p>\n</td>\n</tr><tr>\n<td><code><b>bootstrap:</b> [MyAppComponent]</code></td>\n<td><p>List of components to bootstrap when this module is bootstrapped.</p>\n<p>当本模块启动时，随之启动的组件列表。</p>\n</td>\n</tr>\n</tbody></table>",
"translation":"Use the `/deep/` shadow-piercing descendant combinator to force a style down through the child\ncomponent tree into all the child component views.\nThe `/deep/` combinator works to any depth of nested components, and it applies to both the view\nchildren and content children of the component. 我们可以使用`/deep/`选择器，来强制一个样式对各级子组件的视图也生效，它*不但作用于组件的子视图，也会作用于组件的内容*。",
"original":"Use the `/deep/` shadow-piercing descendant combinator to force a style down through the child\ncomponent tree into all the child component views.\nThe `/deep/` combinator works to any depth of nested components, and it applies to both the view\nchildren and content children of the component.",
"original":"`Emulated`模式（**默认值**）通过预处理（并改名）CSS 代码来模拟 Shadow DOM 的行为，以达到把 CSS 样式局限在组件视图中的目的。\n 更多信息，见[附录 1](guide/component-styles#inspect-generated-css) 。(译注：只进不出，全局样式能进来，组件样式出不去)",
"translation":"* `None` means that Angular does no view encapsulation.\n Angular adds the CSS to the global styles.\n The scoping rules, isolations, and protections discussed earlier don't apply.\n This is essentially the same as pasting the component's styles into the HTML.\n `None`意味着 Angular 不使用视图封装。\n Angular 会把 CSS 添加到全局样式中。而不会应用上前面讨论过的那些作用域规则、隔离和保护等。\n 从本质上来说，这跟把组件的样式直接放进 HTML 是一样的。(译注：能进能出。)\nTo set the components encapsulation mode, use the `encapsulation` property in the component metadata:",
"original":"* `None` means that Angular does no view encapsulation.\n Angular adds the CSS to the global styles.\n The scoping rules, isolations, and protections discussed earlier don't apply.\n This is essentially the same as pasting the component's styles into the HTML.",
"translation":"`None`意味着 Angular 不使用视图封装。\n Angular 会把 CSS 添加到全局样式中。而不会应用上前面讨论过的那些作用域规则、隔离和保护等。\n 从本质上来说，这跟把组件的样式直接放进 HTML 是一样的。(译注：能进能出。)",
"original":"* `None` means that Angular does no view encapsulation.\n Angular adds the CSS to the global styles.\n The scoping rules, isolations, and protections discussed earlier don't apply.\n This is essentially the same as pasting the component's styles into the HTML.\n `None`意味着 Angular 不使用视图封装。\n Angular 会把 CSS 添加到全局样式中。而不会应用上前面讨论过的那些作用域规则、隔离和保护等。\n 从本质上来说，这跟把组件的样式直接放进 HTML 是一样的。(译注：能进能出。)\nTo set the components encapsulation mode, use the `encapsulation` property in the component metadata:",
"original":"To set the components encapsulation mode, use the `encapsulation` property in the component metadata:",
"original":"It's that simple because the most common injected service is an instance of a class.\nBut not every dependency can be satisfied by creating a new instance of a class.\nYou need other ways to deliver dependency values and that means you need other ways to specify a provider.",
"original":"Imagine one branch of a component hierarchy: *Alice* -> *Barry* -> *Carol*. \nBoth *Alice* and *Barry* implement the `Parent` *class-interface*.",
"translation":"<code-example format=\"nocode\">\n Angular is running in the development mode. Call enableProdMode() to enable the production mode.\n （Angular正运行在开发模式下。调用enableProdMode()来启用生产模式）",
"original":"You need one more addition to display the data. Declare\na template variable for the form. Update the `<form>` tag with\n`#heroForm=\"ngForm\"` as follows:",
"original":"### `NgForm`指令What `NgForm` directive?\nYou didn't add an [NgForm](api/forms/NgForm) directive.",
"translation":"什么是`NgForm`指令？\n但我们明明没有添加过[NgForm](api/forms/NgForm)指令啊！Angular did. Angular automatically creates and attaches an `NgForm` directive to the `<form>` tag.",
"original":"What `NgForm` directive?\nYou didn't add an [NgForm](api/forms/NgForm) directive.",
"original":"什么是`NgForm`指令？\n但我们明明没有添加过[NgForm](api/forms/NgForm)指令啊！Angular did. Angular automatically creates and attaches an `NgForm` directive to the `<form>` tag.",
"translation":"Angular替你做了。Angular会在`<form>`标签上自动创建并附加一个`NgForm`指令。The `NgForm` directive supplements the `form` element with additional features.\nIt holds the controls you created for the elements with an `ngModel` directive\nand `name` attribute, and monitors their properties, including their validity.\nIt also has its own `valid` property which is true only *if every contained\ncontrol* is valid.",
"original":"Angular did. Angular automatically creates and attaches an `NgForm` directive to the `<form>` tag.",
"original":"Angular替你做了。Angular会在`<form>`标签上自动创建并附加一个`NgForm`指令。The `NgForm` directive supplements the `form` element with additional features.\nIt holds the controls you created for the elements with an `ngModel` directive\nand `name` attribute, and monitors their properties, including their validity.\nIt also has its own `valid` property which is true only *if every contained\ncontrol* is valid.",
"original":"The `NgForm` directive supplements the `form` element with additional features.\nIt holds the controls you created for the elements with an `ngModel` directive\nand `name` attribute, and monitors their properties, including their validity.\nIt also has its own `valid` property which is true only *if every contained\ncontrol* is valid.",
"translation":"* Each input element has an `id` property that is used by the `label` element's `for` attribute\nto match the label to its input control.\n每个 input 元素都有`id`属性，`label`元素的`for`属性用它来匹配到对应的输入控件。* Each input element has a `name` property that is required by Angular forms to register the control with the form.",
"original":"* Each input element has an `id` property that is used by the `label` element's `for` attribute\nto match the label to its input control.",
"original":"* Each input element has an `id` property that is used by the `label` element's `for` attribute\nto match the label to its input control.\n每个 input 元素都有`id`属性，`label`元素的`for`属性用它来匹配到对应的输入控件。* Each input element has a `name` property that is required by Angular forms to register the control with the form.",
"original":"* Each input element has a `name` property that is required by Angular forms to register the control with the form.",
"original":"Temporarily add a [template reference variable](guide/template-syntax#ref-vars) named `spy`\nto the _Name_ `<input>` tag and use it to display the input's CSS classes.",
"original":"You control visibility of the name error message by binding properties of the `name`\ncontrol to the message `<div>` element's `hidden` property.",
"original":"Now you'll add a new hero in this form.\nPlace a *New Hero* button at the bottom of the form and bind its click event to a `newHero` component method.",
"translation":"我们希望在这个表单中添加新的英雄。\n 在表单的底部放置“New Hero（新增英雄）”按钮，并把它的点击事件绑定到`newHero`组件。<code-example path=\"forms/src/app/hero-form/hero-form.component.html\" region=\"new-hero-button-no-reset\" title=\"src/app/hero-form/hero-form.component.html (New Hero button)\">",
"original":"You have to clear all of the flags imperatively, which you can do\nby calling the form's `reset()` method after calling the `newHero()` method.",
"translation":"我们必须清除所有标记，在调用`newHero()`方法后调用表单的`reset()`方法即可。<code-example path=\"forms/src/app/hero-form/hero-form.component.html\" region=\"new-hero-button-form-reset\" title=\"src/app/hero-form/hero-form.component.html (Reset the form)\">",
"original":"A \"form submit\" is useless at the moment.\nTo make it useful, bind the form's `ngSubmit` event property\nto the hero form component's `onSubmit()` method:",
"original":"You'll bind the form's overall validity via\nthe `heroForm` variable to the button's `disabled` property\nusing an event binding. Here's the code:",
"original":"The main form is visible from the start because the\n`submitted` property is false until you submit the form,\nas this fragment from the `HeroFormComponent` shows:",
"original":"Now the app needs to show something else while the form is in the submitted state.\nAdd the following HTML below the `<div>` wrapper you just wrote:",
"translation":"现在，当表单处于已提交状态时，需要显示一些别的东西。\n在刚刚写的`<div>`包装下方，添加下列 HTML 语句：<code-example path=\"forms/src/app/hero-form/hero-form.component.html\" linenums=\"false\" title=\"src/app/hero-form/hero-form.component.html (excerpt)\" region=\"submitted\">",
"translation":"现在，当表单处于已提交状态时，需要显示一些别的东西。\n在刚刚写的`<div>`包装下方，添加下列 HTML 语句：",
"translation":"*注意这个`subscribe()`方法*。 所有从`HttpClient`返回的可观察对象都是*冷的（cold）*，也就是说，它们只是发起请求的*蓝图*而已。在我们调用`subscribe()`之前，什么都不会发生，而当我们每次调用`subscribe()`时，就会独立发起一次请求。\n比如，下列代码会使用同样的数据发送两次同样的 POST 请求：",
"original":"* A component could be imported from another app module (so you can't declare it) and re-exported by this module.",
"translation":"`HeroComponent`可能是从另一个应用模块中导入的（所以我们没法声明它）并且被当前模块重新导出。\n* A component could be exported for inclusion in an external component's template\nas well as dynamically loaded in a pop-up dialog.",
"original":"`HeroComponent`可能是从另一个应用模块中导入的（所以我们没法声明它）并且被当前模块重新导出。\n* A component could be exported for inclusion in an external component's template\nas well as dynamically loaded in a pop-up dialog.",
"original":"* A component could be exported for inclusion in an external component's template\nas well as dynamically loaded in a pop-up dialog.",
"original":"This section shows you how to organize the crisis center\nto conform to the following recommended pattern for Angular applications:",
"translation":"本节会展示如何组织危机中心，来满足Angular应用所推荐的模式：* Each feature area resides in its own folder. 把每个特性放在自己的目录中。\n* Each feature has its own Angular feature module.",
"original":"本节会展示如何组织危机中心，来满足Angular应用所推荐的模式：* Each feature area resides in its own folder. 把每个特性放在自己的目录中。\n* Each feature has its own Angular feature module.",
"original":"* Each feature area resides in its own folder.",
"translation":"* They are independent of each other.\n它们彼此互不依赖。* They work in combination with other routes. 它们与其它路由组合使用。\n* They are displayed in named outlets.",
"original":"* They are independent of each other.",
"original":"* They are independent of each other.\n它们彼此互不依赖。* They work in combination with other routes. 它们与其它路由组合使用。\n* They are displayed in named outlets.",
"original":"* They work in combination with other routes.",
"translation":"## 下载\n<a href=\"https://github.com/angular/quickstart/archive/master.zip\" title=\"Download the QuickStart seed repository\">Download the QuickStart seed</a>\nand unzip it into your project folder. Then perform the remaining steps with these terminal commands.",
"original":"## 下载\n<a href=\"https://github.com/angular/quickstart/archive/master.zip\" title=\"Download the QuickStart seed repository\">Download the QuickStart seed</a>\nand unzip it into your project folder. Then perform the remaining steps with these terminal commands.",
"original":"<a href=\"https://github.com/angular/quickstart/archive/master.zip\" title=\"Download the QuickStart seed repository\">Download the QuickStart seed</a>\nand unzip it into your project folder. Then perform the remaining steps with these terminal commands.",
"translation":"<code-example format=\"nocode\">\n Template parse errors:\n Can't bind to 'colspan' since it isn't a known native property\n （模板解析错误：不能绑定到 'colspan'，因为它不是已知的原生属性）",
"original":"As the message says, the `<td>` element does not have a `colspan` property.\nIt has the \"colspan\" *attribute*, but\ninterpolation and property binding can set only *properties*, not attributes.",
"translation":"#### Create the _Routing Module_\n#### 创建*路由模块*\nA router needs configuration whether it's the AngularJS or Angular or any other router.",
"original":"The properties of an `$event` object vary depending on the type of DOM event. For example,\na mouse event includes different information than a input box editing event.",
"translation":"`$event`对象的属性取决于 DOM 事件的类型。例如，鼠标事件与输入框编辑事件包含了不同的信息。",
"original":"* [`resolve`](guide/webpack#common-resolves)—how to resolve file names when they lack extensions.",
"translation":"[`resolve`](guide/webpack#common-resolves) - 省略扩展名时如何解释文件名。\n* [`module.rules`](guide/webpack#common-rules)— `module` is an object with `rules` for deciding how files are loaded.",
"original":"[`resolve`](guide/webpack#common-resolves) - 省略扩展名时如何解释文件名。\n* [`module.rules`](guide/webpack#common-rules)— `module` is an object with `rules` for deciding how files are loaded.",
"original":"* [`module.rules`](guide/webpack#common-rules)— `module` is an object with `rules` for deciding how files are loaded.",
For performance reasons, no comparable pipe exists in Angular. Do all your filtering in the component. If you need the same filtering code in several templates, consider building a custom pipe.
For performance reasons, no comparable pipe exists in Angular.
Instead, use component code to order or sort results. If you need the same ordering or sorting code in several templates, consider building a custom pipe.
@ -1437,7 +1442,9 @@ The Angular code is shown using TypeScript.
@ -183,7 +183,9 @@ This first implementation sets the background color of the host element to yello
To use the new `HighlightDirective`, add a paragraph (`<p>`) element to the template of the root `AppComponent` and apply the directive as an attribute.
@ -670,7 +687,10 @@ After revision, the core of the form should look like this:
* Each input element has an `id` property that is used by the `label` element's `for` attribute
to match the label to its input control.
每个 input 元素都有`id`属性，`label`元素的`for`属性用它来匹配到对应的输入控件。* Each input element has a `name` property that is required by Angular forms to register the control with the form.
@ -1034,7 +1060,9 @@ Place a *New Hero* button at the bottom of the form and bind its click event to
我们希望在这个表单中添加新的英雄。
在表单的底部放置“New Hero（新增英雄）”按钮，并把它的点击事件绑定到`newHero`组件。<code-examplepath="forms/src/app/hero-form/hero-form.component.html"region="new-hero-button-no-reset"title="src/app/hero-form/hero-form.component.html (New Hero button)">
<code-examplepath="forms/src/app/hero-form/hero-form.component.html"region="new-hero-button-no-reset"title="src/app/hero-form/hero-form.component.html (New Hero button)">
</code-example>
@ -1072,7 +1100,9 @@ You have to clear all of the flags imperatively, which you can do
by calling the form's `reset()` method after calling the `newHero()` method.
我们必须清除所有标记，在调用`newHero()`方法后调用表单的`reset()`方法即可。<code-examplepath="forms/src/app/hero-form/hero-form.component.html"region="new-hero-button-form-reset"title="src/app/hero-form/hero-form.component.html (Reset the form)">
我们必须清除所有标记，在调用`newHero()`方法后调用表单的`reset()`方法即可。
<code-examplepath="forms/src/app/hero-form/hero-form.component.html"region="new-hero-button-form-reset"title="src/app/hero-form/hero-form.component.html (Reset the form)">
</code-example>
@ -1100,7 +1130,9 @@ to the hero form component's `onSubmit()` method:
@ -1209,7 +1247,9 @@ Add the following HTML below the `<div>` wrapper you just wrote:
现在，当表单处于已提交状态时，需要显示一些别的东西。
在刚刚写的`<div>`包装下方，添加下列 HTML 语句：<code-examplepath="forms/src/app/hero-form/hero-form.component.html"linenums="false"title="src/app/hero-form/hero-form.component.html (excerpt)"region="submitted">
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Zhicheng Wang