fix: translate all pure english titles
This commit is contained in:
		
							parent
							
								
									41c73556e6
								
							
						
					
					
						commit
						0ddf72745e
					
				| @ -22,6 +22,8 @@ The process of transforming code written in one form of JavaScript | |||||||
| 
 | 
 | ||||||
| ## TypeScript | ## TypeScript | ||||||
| 
 | 
 | ||||||
|  | ## TypeScript 语言 | ||||||
|  | 
 | ||||||
| 
 | 
 | ||||||
| <div class="l-sub-section"> | <div class="l-sub-section"> | ||||||
| 
 | 
 | ||||||
|  | |||||||
| @ -367,6 +367,8 @@ AOT编译会把应用中的大部分都转换成JavaScript,这种转换会让 | |||||||
| 
 | 
 | ||||||
| ### Rollup | ### Rollup | ||||||
| 
 | 
 | ||||||
|  | ### Rollup 工具 | ||||||
|  | 
 | ||||||
| This cookbook illustrates a tree shaking utility called _Rollup_. | This cookbook illustrates a tree shaking utility called _Rollup_. | ||||||
| 
 | 
 | ||||||
| 这个烹饪宝典中用来示范的摇树优化工具是*Rollup*。 | 这个烹饪宝典中用来示范的摇树优化工具是*Rollup*。 | ||||||
|  | |||||||
| @ -154,6 +154,8 @@ During development you're likely to bootstrap the `AppModule` in a `main.ts` fil | |||||||
| 
 | 
 | ||||||
| ### NgModules vs. JavaScript modules | ### NgModules vs. JavaScript modules | ||||||
| 
 | 
 | ||||||
|  | ### NgModules vs. JavaScript 模块 | ||||||
|  | 
 | ||||||
| The NgModule — a class decorated with `@NgModule` — is a fundamental feature of Angular. | The NgModule — a class decorated with `@NgModule` — is a fundamental feature of Angular. | ||||||
| 
 | 
 | ||||||
| NgModule(一个带`@NgModule`装饰器的类)是 Angular 的基础特性之一。 | NgModule(一个带`@NgModule`装饰器的类)是 Angular 的基础特性之一。 | ||||||
|  | |||||||
| @ -135,6 +135,8 @@ The following sections describe these selectors. | |||||||
| 
 | 
 | ||||||
| ### :host | ### :host | ||||||
| 
 | 
 | ||||||
|  | ### :host 选择器 | ||||||
|  | 
 | ||||||
| Use the `:host` pseudo-class selector to target styles in the element that *hosts* the component (as opposed to | Use the `:host` pseudo-class selector to target styles in the element that *hosts* the component (as opposed to | ||||||
| targeting elements *inside* the component's template). | targeting elements *inside* the component's template). | ||||||
| 
 | 
 | ||||||
| @ -172,6 +174,8 @@ The next example targets the host element again, but only when it also has the ` | |||||||
| 
 | 
 | ||||||
| ### :host-context | ### :host-context | ||||||
| 
 | 
 | ||||||
|  | ### :host-context 选择器 | ||||||
|  | 
 | ||||||
| Sometimes it's useful to apply styles based on some condition *outside* of a component's view. | Sometimes it's useful to apply styles based on some condition *outside* of a component's view. | ||||||
| For example, a CSS theme class could be applied to the document `<body>` element, and | For example, a CSS theme class could be applied to the document `<body>` element, and | ||||||
| you want to change how your component looks based on that. | you want to change how your component looks based on that. | ||||||
| @ -200,6 +204,8 @@ if some ancestor element has the CSS class `theme-light`. | |||||||
| 
 | 
 | ||||||
| ### (deprecated) `/deep/`, `>>>`, and `::ng-deep` | ### (deprecated) `/deep/`, `>>>`, and `::ng-deep` | ||||||
| 
 | 
 | ||||||
|  | ### 已废弃 `/deep/`、`>>>`和`::ng-deep` | ||||||
|  | 
 | ||||||
| Component styles normally apply only to the HTML in the component's own template.  | Component styles normally apply only to the HTML in the component's own template.  | ||||||
| 
 | 
 | ||||||
| 组件样式通常只会作用于组件自身的 HTML 上。 | 组件样式通常只会作用于组件自身的 HTML 上。 | ||||||
| @ -391,6 +397,8 @@ application root, not  the component file. | |||||||
| 
 | 
 | ||||||
| ### CSS @imports | ### CSS @imports | ||||||
| 
 | 
 | ||||||
|  | ### CSS @imports 语法 | ||||||
|  | 
 | ||||||
| You can also import CSS files into the CSS files using the standard CSS `@import` rule. | You can also import CSS files into the CSS files using the standard CSS `@import` rule. | ||||||
| For details, see [`@import`](https://developer.mozilla.org/en/docs/Web/CSS/@import) | For details, see [`@import`](https://developer.mozilla.org/en/docs/Web/CSS/@import) | ||||||
| on the [MDN](https://developer.mozilla.org) site. | on the [MDN](https://developer.mozilla.org) site. | ||||||
|  | |||||||
| @ -302,7 +302,7 @@ Once all the dependencies are in place, the `AppComponent` displays the user inf | |||||||
| 
 | 
 | ||||||
| ### *@Injectable()* | ### *@Injectable()* | ||||||
| 
 | 
 | ||||||
| ### *@Injectable()* | ### *@Injectable()* 注解 | ||||||
| 
 | 
 | ||||||
| Notice the `@Injectable()`decorator on the `UserContextService` class.  | Notice the `@Injectable()`decorator on the `UserContextService` class.  | ||||||
| 
 | 
 | ||||||
| @ -1231,6 +1231,8 @@ That's the subject of the next section. | |||||||
| 
 | 
 | ||||||
| ### class-interface | ### class-interface | ||||||
| 
 | 
 | ||||||
|  | ### 类-接口 | ||||||
|  | 
 | ||||||
| The previous *Hero of the Month* example used the `MinimalLogger` class | The previous *Hero of the Month* example used the `MinimalLogger` class | ||||||
| as the token for a provider of a `LoggerService`. | as the token for a provider of a `LoggerService`. | ||||||
| 
 | 
 | ||||||
| @ -1332,6 +1334,8 @@ Notice that it doesn't have a single member. It never grows no matter how many m | |||||||
| 
 | 
 | ||||||
| ### _InjectionToken_ | ### _InjectionToken_ | ||||||
| 
 | 
 | ||||||
|  | ### _InjectionToken_ 值 | ||||||
|  | 
 | ||||||
| Dependency objects can be simple values like dates, numbers and strings, or | Dependency objects can be simple values like dates, numbers and strings, or | ||||||
| shapeless objects like arrays and functions. | shapeless objects like arrays and functions. | ||||||
| 
 | 
 | ||||||
|  | |||||||
| @ -1569,6 +1569,8 @@ TypeScript 接口不会出现在生成的 JavaScript 代码中。 | |||||||
| 
 | 
 | ||||||
| ### _InjectionToken_ | ### _InjectionToken_ | ||||||
| 
 | 
 | ||||||
|  | ### _InjectionToken_ 值 | ||||||
|  | 
 | ||||||
| One solution to choosing a provider token for non-class dependencies is | One solution to choosing a provider token for non-class dependencies is | ||||||
| to define and use an [*InjectionToken*](api/core/InjectionToken). | to define and use an [*InjectionToken*](api/core/InjectionToken). | ||||||
| The definition of such a token looks like this: | The definition of such a token looks like this: | ||||||
|  | |||||||
| @ -1,5 +1,7 @@ | |||||||
| # Angular Glossary | # Angular Glossary | ||||||
| 
 | 
 | ||||||
|  | # Angular 词汇表 | ||||||
|  | 
 | ||||||
| Angular has its own vocabulary. | Angular has its own vocabulary. | ||||||
| Most Angular terms are common English words | Most Angular terms are common English words | ||||||
| with a specific meaning within the Angular system. | with a specific meaning within the Angular system. | ||||||
| @ -538,6 +540,8 @@ elements and their children. | |||||||
| 
 | 
 | ||||||
| ## ECMAScript | ## ECMAScript | ||||||
| 
 | 
 | ||||||
|  | ## ECMAScript 语言 | ||||||
|  | 
 | ||||||
| The [official JavaScript language specification](https://en.wikipedia.org/wiki/ECMAScript). | The [official JavaScript language specification](https://en.wikipedia.org/wiki/ECMAScript). | ||||||
| 
 | 
 | ||||||
| [官方 JavaScript 语言规范](https://en.wikipedia.org/wiki/ECMAScript) | [官方 JavaScript 语言规范](https://en.wikipedia.org/wiki/ECMAScript) | ||||||
| @ -565,18 +569,24 @@ Angular 的开发人员也可以选择直接使用 ES5 编程。 | |||||||
| 
 | 
 | ||||||
| ## ES2015 | ## ES2015 | ||||||
| 
 | 
 | ||||||
|  | ## ES2015 语言 | ||||||
|  | 
 | ||||||
| Short hand for [ECMAScript](guide/glossary#ecmascript) 2015. | Short hand for [ECMAScript](guide/glossary#ecmascript) 2015. | ||||||
| 
 | 
 | ||||||
| [ECMAScript](guide/glossary#ecmascript) 2015 的缩写。 | [ECMAScript](guide/glossary#ecmascript) 2015 的缩写。 | ||||||
| 
 | 
 | ||||||
| ## ES5 | ## ES5 | ||||||
| 
 | 
 | ||||||
|  | ## ES5 语言 | ||||||
|  | 
 | ||||||
| Short hand for [ECMAScript](guide/glossary#ecmascript) 5, the version of JavaScript run by most modern browsers. | Short hand for [ECMAScript](guide/glossary#ecmascript) 5, the version of JavaScript run by most modern browsers. | ||||||
| 
 | 
 | ||||||
| “[ECMAScript](guide/glossary#ecmascript) 5”的简写,大部分现代浏览器使用的 JavaScript 版本。 | “[ECMAScript](guide/glossary#ecmascript) 5”的简写,大部分现代浏览器使用的 JavaScript 版本。 | ||||||
| 
 | 
 | ||||||
| ## ES6 | ## ES6 | ||||||
| 
 | 
 | ||||||
|  | ## ES6 语言 | ||||||
|  | 
 | ||||||
| Short hand for [ECMAScript](guide/glossary#ecmascript) 2015. | Short hand for [ECMAScript](guide/glossary#ecmascript) 2015. | ||||||
| 
 | 
 | ||||||
| [ECMAScript](guide/glossary#ecmascript) 2015 的简写。 | [ECMAScript](guide/glossary#ecmascript) 2015 的简写。 | ||||||
| @ -833,6 +843,8 @@ For details and examples, see [NgModules](guide/ngmodule). | |||||||
| 
 | 
 | ||||||
| ## Observable | ## Observable | ||||||
| 
 | 
 | ||||||
|  | ## Observable 对象 | ||||||
|  | 
 | ||||||
| An array whose items arrive asynchronously over time. | An array whose items arrive asynchronously over time. | ||||||
| Observables help you manage asynchronous data, such as data coming from a backend service. | Observables help you manage asynchronous data, such as data coming from a backend service. | ||||||
| Observables are used within Angular itself, including Angular's event system and its HTTP client service. | Observables are used within Angular itself, including Angular's event system and its HTTP client service. | ||||||
| @ -1109,6 +1121,8 @@ underscore (`_`) separates one word from the next. This form is also known as *u | |||||||
| 
 | 
 | ||||||
| ## Structural directives | ## Structural directives | ||||||
| 
 | 
 | ||||||
|  | ## 结构型指令 | ||||||
|  | 
 | ||||||
| A category of [directive](guide/glossary#directive) that can | A category of [directive](guide/glossary#directive) that can | ||||||
| shape or reshape HTML layout, typically by adding and removing elements in the DOM. | shape or reshape HTML layout, typically by adding and removing elements in the DOM. | ||||||
| The `ngIf` "conditional element" directive and the `ngFor` "repeater" directive are well-known examples. | The `ngIf` "conditional element" directive and the `ngFor` "repeater" directive are well-known examples. | ||||||
| @ -1204,6 +1218,8 @@ The process of transforming code written in one form of JavaScript | |||||||
| 
 | 
 | ||||||
| ## TypeScript | ## TypeScript | ||||||
| 
 | 
 | ||||||
|  | ## TypeScript 语言 | ||||||
|  | 
 | ||||||
| A version of JavaScript that supports most [ECMAScript 2015](guide/glossary#es2015) | A version of JavaScript that supports most [ECMAScript 2015](guide/glossary#es2015) | ||||||
| language features such as [decorators](guide/glossary#decorator). | language features such as [decorators](guide/glossary#decorator). | ||||||
| 
 | 
 | ||||||
|  | |||||||
| @ -480,12 +480,17 @@ Windows users may have to quote the command like this: `"./node_modules/.bin/ng- | |||||||
| 
 | 
 | ||||||
| By default, the tool generates a translation file named **`messages.xlf`** in the | By default, the tool generates a translation file named **`messages.xlf`** in the | ||||||
| <a href="https://en.wikipedia.org/wiki/XLIFF" >XML Localization Interchange File Format (XLIFF, version 1.2)</a>. | <a href="https://en.wikipedia.org/wiki/XLIFF" >XML Localization Interchange File Format (XLIFF, version 1.2)</a>. | ||||||
|  | 
 | ||||||
| 工具默认生成一个名为**`messages.xlf`**的翻译文件,格式为<a href="https://en.wikipedia.org/wiki/XLIFF" target="_blank">XML本土化互换文件格式(XLIFF, version 1.2)</a>。 | 工具默认生成一个名为**`messages.xlf`**的翻译文件,格式为<a href="https://en.wikipedia.org/wiki/XLIFF" target="_blank">XML本土化互换文件格式(XLIFF, version 1.2)</a>。 | ||||||
| 
 | 
 | ||||||
| {@a other-formats} | {@a other-formats} | ||||||
| 
 | 
 | ||||||
| ### Other translation formats | ### Other translation formats | ||||||
| 
 | 
 | ||||||
|  | ### 其它翻译格式 | ||||||
|  | 
 | ||||||
|  | // TODO: Translate | ||||||
|  | 
 | ||||||
| Angular i18n tooling supports XLIFF 1.2 and XLIFF 2 as well as the | Angular i18n tooling supports XLIFF 1.2 and XLIFF 2 as well as the | ||||||
| <a href="http://cldr.unicode.org/development/development-process/design-proposals/xmb" >XML Message Bundle (XMB)</a>. | <a href="http://cldr.unicode.org/development/development-process/design-proposals/xmb" >XML Message Bundle (XMB)</a>. | ||||||
| 
 | 
 | ||||||
| @ -590,6 +595,9 @@ Do the same for each target language. | |||||||
| {@a translate-text-nodes} | {@a translate-text-nodes} | ||||||
| 
 | 
 | ||||||
| ### Translate text nodes | ### Translate text nodes | ||||||
|  | 
 | ||||||
|  | ### 翻译文本节点 | ||||||
|  | 
 | ||||||
| In the real world, you send the `messages.es.xlf` file to a Spanish translator who fills in the translations | In the real world, you send the `messages.es.xlf` file to a Spanish translator who fills in the translations | ||||||
| using one of the | using one of the | ||||||
| <a href="https://en.wikipedia.org/wiki/XLIFF#Editors">many XLIFF file editors</a>. | <a href="https://en.wikipedia.org/wiki/XLIFF#Editors">many XLIFF file editors</a>. | ||||||
|  | |||||||
| @ -708,6 +708,8 @@ You risk memory leaks if you neglect to do so. | |||||||
| 
 | 
 | ||||||
| ## _OnChanges()_ | ## _OnChanges()_ | ||||||
| 
 | 
 | ||||||
|  | ## _OnChanges()_ 钩子 | ||||||
|  | 
 | ||||||
| Angular calls its `ngOnChanges()` method whenever it detects changes to ***input properties*** of the component (or directive). | Angular calls its `ngOnChanges()` method whenever it detects changes to ***input properties*** of the component (or directive). | ||||||
| 
 | 
 | ||||||
| 一旦检测到该组件(或指令)的***输入属性***发生了变化,Angular就会调用它的`ngOnChanges()`方法。 | 一旦检测到该组件(或指令)的***输入属性***发生了变化,Angular就会调用它的`ngOnChanges()`方法。 | ||||||
| @ -776,6 +778,8 @@ Angular不会关注这个英雄对象的`name`属性的变化。 | |||||||
| 
 | 
 | ||||||
| ## _DoCheck()_ | ## _DoCheck()_ | ||||||
| 
 | 
 | ||||||
|  | ## _DoCheck()_ 钩子 | ||||||
|  | 
 | ||||||
| Use the `DoCheck` hook to detect and act upon changes that Angular doesn't catch on its own. | Use the `DoCheck` hook to detect and act upon changes that Angular doesn't catch on its own. | ||||||
| 
 | 
 | ||||||
| 使用`DoCheck`钩子来检测那些Angular自身无法捕获的变更并采取行动。 | 使用`DoCheck`钩子来检测那些Angular自身无法捕获的变更并采取行动。 | ||||||
| @ -833,6 +837,8 @@ Clearly our implementation must be very lightweight or the user experience suffe | |||||||
| 
 | 
 | ||||||
| ## AfterView | ## AfterView | ||||||
| 
 | 
 | ||||||
|  | ## AfterView 钩子 | ||||||
|  | 
 | ||||||
| The *AfterView* sample explores the `AfterViewInit()` and `AfterViewChecked()` hooks that Angular calls | The *AfterView* sample explores the `AfterViewInit()` and `AfterViewChecked()` hooks that Angular calls | ||||||
| *after* it creates a component's child views. | *after* it creates a component's child views. | ||||||
| 
 | 
 | ||||||
| @ -914,6 +920,8 @@ Write lean hook methods to avoid performance problems. | |||||||
| 
 | 
 | ||||||
| ## AfterContent | ## AfterContent | ||||||
| 
 | 
 | ||||||
|  | ## AfterContent 钩子 | ||||||
|  | 
 | ||||||
| The *AfterContent* sample explores the `AfterContentInit()` and `AfterContentChecked()` hooks that Angular calls | The *AfterContent* sample explores the `AfterContentInit()` and `AfterContentChecked()` hooks that Angular calls | ||||||
| *after* Angular projects external content into the component. | *after* Angular projects external content into the component. | ||||||
| 
 | 
 | ||||||
|  | |||||||
| @ -1251,6 +1251,8 @@ Read with appropriate caution and reflection. | |||||||
| 
 | 
 | ||||||
| ### _SharedModule_ | ### _SharedModule_ | ||||||
| 
 | 
 | ||||||
|  | ### _SharedModule_ 共享模块 | ||||||
|  | 
 | ||||||
| Create a `SharedModule` with the components, directives, and pipes that you use | Create a `SharedModule` with the components, directives, and pipes that you use | ||||||
| everywhere in your app. This module should consist entirely of `declarations`, | everywhere in your app. This module should consist entirely of `declarations`, | ||||||
| most of them exported. | most of them exported. | ||||||
| @ -1278,6 +1280,8 @@ both those loaded when the app starts and those you lazy load later. | |||||||
| 
 | 
 | ||||||
| ### _CoreModule_ | ### _CoreModule_ | ||||||
| 
 | 
 | ||||||
|  | ### _CoreModule_ 核心模块 | ||||||
|  | 
 | ||||||
| Create a `CoreModule` with `providers` for the singleton services you load when the application starts. | Create a `CoreModule` with `providers` for the singleton services you load when the application starts. | ||||||
| 
 | 
 | ||||||
| 为你要在应用启动时加载的那些服务创建一个带`providers`的`CoreModule`。 | 为你要在应用启动时加载的那些服务创建一个带`providers`的`CoreModule`。 | ||||||
| @ -2409,6 +2413,8 @@ how to link this module with other modules. | |||||||
| 
 | 
 | ||||||
| ## NgModule API | ## NgModule API | ||||||
| 
 | 
 | ||||||
|  | ## NgModule 模块 API | ||||||
|  | 
 | ||||||
| The following table summarizes the `NgModule` metadata properties. | The following table summarizes the `NgModule` metadata properties. | ||||||
| 
 | 
 | ||||||
| 下面是`NgModule`元数据中属性的汇总表: | 下面是`NgModule`元数据中属性的汇总表: | ||||||
|  | |||||||
| @ -1591,6 +1591,8 @@ the latter separated from the former by a `#`. | |||||||
| 
 | 
 | ||||||
| ### RouterModule.forRoot | ### RouterModule.forRoot | ||||||
| 
 | 
 | ||||||
|  | ### RouterModule.forRoot 方法 | ||||||
|  | 
 | ||||||
| The `forRoot` static class method of the `RouterModule` with the provided configuration and | The `forRoot` static class method of the `RouterModule` with the provided configuration and | ||||||
| added to the `imports` array provides the routing concerns for the module. | added to the `imports` array provides the routing concerns for the module. | ||||||
| 
 | 
 | ||||||
|  | |||||||
| @ -110,6 +110,9 @@ You can exclude them from production installations by adding `--production` to t | |||||||
| 
 | 
 | ||||||
| 
 | 
 | ||||||
| ## *dependencies* | ## *dependencies* | ||||||
|  | 
 | ||||||
|  | ## *dependencies* 依赖 | ||||||
|  | 
 | ||||||
| The `dependencies` section of `package.json` contains: | The `dependencies` section of `package.json` contains: | ||||||
| 
 | 
 | ||||||
| 应用程序的`package.json`文件中,`dependencies`区下有三类包: | 应用程序的`package.json`文件中,`dependencies`区下有三类包: | ||||||
| @ -277,6 +280,8 @@ Some of the samples improve their appearance with *bootstrap*. | |||||||
| 
 | 
 | ||||||
| ## *devDependencies* | ## *devDependencies* | ||||||
| 
 | 
 | ||||||
|  | ## *devDependencies* 依赖 | ||||||
|  | 
 | ||||||
| The packages listed in the *devDependencies* section of the `package.json` help you develop the application. | The packages listed in the *devDependencies* section of the `package.json` help you develop the application. | ||||||
| You don't have to deploy them with the production application although there is no harm in doing so. | You don't have to deploy them with the production application although there is no harm in doing so. | ||||||
| 
 | 
 | ||||||
|  | |||||||
| @ -734,6 +734,8 @@ It beats writing an equivalent series of `new FormControl(...)` statements. | |||||||
| 
 | 
 | ||||||
| ### Validators.required | ### Validators.required | ||||||
| 
 | 
 | ||||||
|  | ### Validators.required 验证器 | ||||||
|  | 
 | ||||||
| Though this guide doesn't go deeply into validations, here is one example that | Though this guide doesn't go deeply into validations, here is one example that | ||||||
| demonstrates the simplicity of using `Validators.required` in reactive forms. | demonstrates the simplicity of using `Validators.required` in reactive forms. | ||||||
| 
 | 
 | ||||||
| @ -1300,6 +1302,8 @@ You can also initialize or reset the values _later_ with the | |||||||
| 
 | 
 | ||||||
| ### _setValue_ | ### _setValue_ | ||||||
| 
 | 
 | ||||||
|  | ### _setValue_ 方法 | ||||||
|  | 
 | ||||||
| With **`setValue`**, you assign _every_ form control value _at once_ | With **`setValue`**, you assign _every_ form control value _at once_ | ||||||
| by passing in a data object whose properties exactly match the _form model_ behind the `FormGroup`. | by passing in a data object whose properties exactly match the _form model_ behind the `FormGroup`. | ||||||
| 
 | 
 | ||||||
| @ -1350,6 +1354,8 @@ This explains the conditional setting of the `address` property in the data obje | |||||||
| 
 | 
 | ||||||
| ### _patchValue_ | ### _patchValue_ | ||||||
| 
 | 
 | ||||||
|  | ### _patchValue_ 方法 | ||||||
|  | 
 | ||||||
| With **`patchValue`**, you can assign values to specific controls in a `FormGroup` | With **`patchValue`**, you can assign values to specific controls in a `FormGroup` | ||||||
| by supplying an object of key/value pairs for just the controls of interest. | by supplying an object of key/value pairs for just the controls of interest. | ||||||
| 
 | 
 | ||||||
|  | |||||||
| @ -76,6 +76,8 @@ An introduction to a few core router concepts will help orient you to the detail | |||||||
| 
 | 
 | ||||||
| ### *<base href>* | ### *<base href>* | ||||||
| 
 | 
 | ||||||
|  | ### *<base href>* 元素 | ||||||
|  | 
 | ||||||
| Most routing applications should add a `<base>` element to the `index.html` as the first child in the  `<head>` tag | Most routing applications should add a `<base>` element to the `index.html` as the first child in the  `<head>` tag | ||||||
| to tell the router how to compose navigation URLs. | to tell the router how to compose navigation URLs. | ||||||
| 
 | 
 | ||||||
| @ -307,6 +309,10 @@ to get information from parent, child and sibling routes. | |||||||
| 
 | 
 | ||||||
| ### Router events | ### Router events | ||||||
| 
 | 
 | ||||||
|  | ### 路由事件 | ||||||
|  | 
 | ||||||
|  | // 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. | 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. | ||||||
| 
 | 
 | ||||||
| <table> | <table> | ||||||
| @ -1225,6 +1231,8 @@ The corresponding component template looks like this: | |||||||
| 
 | 
 | ||||||
| ### *RouterOutlet* | ### *RouterOutlet* | ||||||
| 
 | 
 | ||||||
|  | ### *RouterOutlet* 指令 | ||||||
|  | 
 | ||||||
| The `RouterOutlet` is a directive from the router library that marks | The `RouterOutlet` is a directive from the router library that marks | ||||||
| the spot in the template where the router should display the views for that outlet. | the spot in the template where the router should display the views for that outlet. | ||||||
| 
 | 
 | ||||||
| @ -2623,6 +2631,8 @@ Use `queryParamMap` instead. | |||||||
| 
 | 
 | ||||||
| #### _Activated Route_ in action | #### _Activated Route_ in action | ||||||
| 
 | 
 | ||||||
|  | #### _Activated Route_ 实战 | ||||||
|  | 
 | ||||||
| Import the `Router`, `ActivatedRoute`, and `ParamMap` tokens from the router package. | Import the `Router`, `ActivatedRoute`, and `ParamMap` tokens from the router package. | ||||||
| 
 | 
 | ||||||
| 我们要从路由器(`router`)包中导入`Router`、`ActivatedRoute`和`Params`类。 | 我们要从路由器(`router`)包中导入`Router`、`ActivatedRoute`和`Params`类。 | ||||||
| @ -2687,6 +2697,8 @@ Finally, you activate the observable with `subscribe` method and (re)set the com | |||||||
| 
 | 
 | ||||||
| #### _ParamMap_ API | #### _ParamMap_ API | ||||||
| 
 | 
 | ||||||
|  | #### _ParamMap_ 参数 API | ||||||
|  | 
 | ||||||
| The `ParamMap` API is inspired by the [URLSearchParams interface](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams). It provides methods | The `ParamMap` API is inspired by the [URLSearchParams interface](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams). It provides methods | ||||||
| to handle parameter access for both route parameters (`paramMap`) and query parameters (`queryParamMap`). | to handle parameter access for both route parameters (`paramMap`) and query parameters (`queryParamMap`). | ||||||
| 
 | 
 | ||||||
| @ -4895,6 +4907,8 @@ You need the `CanDeactivate` guard. | |||||||
| 
 | 
 | ||||||
| ### Cancel and save | ### Cancel and save | ||||||
| 
 | 
 | ||||||
|  | ### 取消与保存 | ||||||
|  | 
 | ||||||
| The sample application doesn't talk to a server. | The sample application doesn't talk to a server. | ||||||
| Fortunately, you have another way to demonstrate an asynchronous router hook. | Fortunately, you have another way to demonstrate an asynchronous router hook. | ||||||
| 
 | 
 | ||||||
| @ -6262,6 +6276,8 @@ Those developers may still use HTML5 URLs by taking two remedial steps: | |||||||
| 
 | 
 | ||||||
| #### *HashLocationStrategy* | #### *HashLocationStrategy* | ||||||
| 
 | 
 | ||||||
|  | #### *HashLocationStrategy* 策略 | ||||||
|  | 
 | ||||||
| You can go old-school with the `HashLocationStrategy` by | You can go old-school with the `HashLocationStrategy` by | ||||||
| providing the `useHash: true` in an object as the second argument of the `RouterModule.forRoot` | providing the `useHash: true` in an object as the second argument of the `RouterModule.forRoot` | ||||||
| in the `AppModule`. | in the `AppModule`. | ||||||
|  | |||||||
| @ -605,6 +605,8 @@ That, in turn, can be desugared into the `<ng-template>` element form. | |||||||
| 
 | 
 | ||||||
| ## Prefer the asterisk (*) syntax. | ## Prefer the asterisk (*) syntax. | ||||||
| 
 | 
 | ||||||
|  | // TODO: Translate | ||||||
|  | 
 | ||||||
| The asterisk (*) syntax is more clear than the other desugared forms. | 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 | Use [<ng-container>](guide/structural-directives#ng-container) when there's no single element | ||||||
| to host the directive. | to host the directive. | ||||||
| @ -950,6 +952,8 @@ When the`condition` is truthy, the top (A)paragraph is removed  and the bottom ( | |||||||
| 
 | 
 | ||||||
| ## Summary | ## Summary | ||||||
| 
 | 
 | ||||||
|  | ## 总结 | ||||||
|  | 
 | ||||||
| You can both try and download the source code for this guide in the <live-example></live-example>. | You can both try and download the source code for this guide in the <live-example></live-example>. | ||||||
| 
 | 
 | ||||||
| Here is the source from the `src/app/` folder. | Here is the source from the `src/app/` folder. | ||||||
|  | |||||||
| @ -2170,6 +2170,8 @@ This section is an introduction to the most commonly used attribute directives: | |||||||
| 
 | 
 | ||||||
| ### NgClass | ### NgClass | ||||||
| 
 | 
 | ||||||
|  | ### NgClass 指令 | ||||||
|  | 
 | ||||||
| You typically control how elements appear | You typically control how elements appear | ||||||
| by adding and removing CSS classes dynamically. | by adding and removing CSS classes dynamically. | ||||||
| You can bind to the `ngClass` to add or remove several classes simultaneously. | You can bind to the `ngClass` to add or remove several classes simultaneously. | ||||||
| @ -2233,6 +2235,9 @@ It's up to you to call `setCurrentClassess()`, both initially and when the depen | |||||||
| {@a ngStyle} | {@a ngStyle} | ||||||
| 
 | 
 | ||||||
| ### NgStyle | ### NgStyle | ||||||
|  | 
 | ||||||
|  | ### NgStyle 指令 | ||||||
|  | 
 | ||||||
| You can set inline styles dynamically, based on the state of the component. | You can set inline styles dynamically, based on the state of the component. | ||||||
| With `NgStyle` you can set many inline styles simultaneously. | With `NgStyle` you can set many inline styles simultaneously. | ||||||
| 
 | 
 | ||||||
| @ -2501,6 +2506,8 @@ _This_ section is an introduction to the common structural directives: | |||||||
| 
 | 
 | ||||||
| ### NgIf | ### NgIf | ||||||
| 
 | 
 | ||||||
|  | ### NgIf 指令 | ||||||
|  | 
 | ||||||
| You can add or remove an element from the DOM by applying an `NgIf` directive to | You can add or remove an element from the DOM by applying an `NgIf` directive to | ||||||
| that element (called the _host element_). | that element (called the _host element_). | ||||||
| Bind the directive to a condition expression like `isActive` in this example. | Bind the directive to a condition expression like `isActive` in this example. | ||||||
| @ -2612,6 +2619,8 @@ described below. | |||||||
| 
 | 
 | ||||||
| ### NgFor | ### NgFor | ||||||
| 
 | 
 | ||||||
|  | ### NgFor 指令 | ||||||
|  | 
 | ||||||
| `NgFor` is a _repeater_ directive — a way to present a list of items. | `NgFor` is a _repeater_ directive — a way to present a list of items. | ||||||
| You define a block of HTML that defines how a single item should be displayed. | You define a block of HTML that defines how a single item should be displayed. | ||||||
| You tell Angular to use that block as a template for rendering each item in the list. | You tell Angular to use that block as a template for rendering each item in the list. | ||||||
| @ -3461,6 +3470,8 @@ It works perfectly with long property paths such as `a?.b?.c?.d`. | |||||||
| 
 | 
 | ||||||
| ### The non-null assertion operator ( <span class="syntax">!</span> ) | ### The non-null assertion operator ( <span class="syntax">!</span> ) | ||||||
| 
 | 
 | ||||||
|  | // TODO: Translate | ||||||
|  | 
 | ||||||
| As of Typescript 2.0, you can enforce [strict null checking](http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html "Strict null checking in TypeScript") with the `--strictNullChecks` flag. TypeScript then ensures that no variable is _unintentionally_ null or undefined. | As of Typescript 2.0, you can enforce [strict null checking](http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html "Strict null checking in TypeScript") with the `--strictNullChecks` flag. TypeScript then ensures that no variable is _unintentionally_ null or undefined. | ||||||
| 
 | 
 | ||||||
| In this mode, typed variables disallow null and undefined by default. The type checker throws an error if you leave a variable unassigned or try to assign null or undefined to a variable whose type disallows null and undefined. | In this mode, typed variables disallow null and undefined by default. The type checker throws an error if you leave a variable unassigned or try to assign null or undefined to a variable whose type disallows null and undefined. | ||||||
|  | |||||||
| @ -644,6 +644,8 @@ Here's the `describe` and the `beforeEach` that precedes the tests: | |||||||
| 
 | 
 | ||||||
| ### _TestBed_ | ### _TestBed_ | ||||||
| 
 | 
 | ||||||
|  | ### _TestBed_ 测试台 | ||||||
|  | 
 | ||||||
| `TestBed` is the first and most important of the  Angular testing utilities. | `TestBed` is the first and most important of the  Angular testing utilities. | ||||||
| It creates an Angular testing module—an `@NgModule` class—that | It creates an Angular testing module—an `@NgModule` class—that | ||||||
| you configure with the `configureTestingModule` method to produce the module environment for the class you want to test. | you configure with the `configureTestingModule` method to produce the module environment for the class you want to test. | ||||||
| @ -708,6 +710,8 @@ Optional `override` methods can fine-tune aspects of the configuration. | |||||||
| 
 | 
 | ||||||
| ### _createComponent_ | ### _createComponent_ | ||||||
| 
 | 
 | ||||||
|  | ### _createComponent_ 方法 | ||||||
|  | 
 | ||||||
| After configuring `TestBed`, you tell it to create an instance of the _component-under-test_. | After configuring `TestBed`, you tell it to create an instance of the _component-under-test_. | ||||||
| In this example, `TestBed.createComponent` creates an instance of `BannerComponent` and | In this example, `TestBed.createComponent` creates an instance of `BannerComponent` and | ||||||
| returns a [_component test fixture_](guide/testing#component-fixture). | returns a [_component test fixture_](guide/testing#component-fixture). | ||||||
| @ -1065,6 +1069,8 @@ All this is necessary in order to call the asynchronous `TestBed.compileComponen | |||||||
| 
 | 
 | ||||||
| ### _compileComponents_ | ### _compileComponents_ | ||||||
| 
 | 
 | ||||||
|  | ### _compileComponents_ 方法 | ||||||
|  | 
 | ||||||
| The `TestBed.configureTestingModule` method returns the `TestBed` class so you can chain | The `TestBed.configureTestingModule` method returns the `TestBed` class so you can chain | ||||||
| calls to other `TestBed` static methods such as `compileComponents`. | calls to other `TestBed` static methods such as `compileComponents`. | ||||||
| 
 | 
 | ||||||
| @ -1333,6 +1339,8 @@ The component injector is a property of the fixture's `DebugElement`. | |||||||
| 
 | 
 | ||||||
| ### _TestBed.get_ | ### _TestBed.get_ | ||||||
| 
 | 
 | ||||||
|  | ### _TestBed.get_ 方法 | ||||||
|  | 
 | ||||||
| You _may_ also be able to get the service from the root injector via `TestBed.get`. | You _may_ also be able to get the service from the root injector via `TestBed.get`. | ||||||
| This is easier to remember and less verbose. | This is easier to remember and less verbose. | ||||||
| But it only works when Angular injects the component with the service instance in the test's root injector. | But it only works when Angular injects the component with the service instance in the test's root injector. | ||||||
| @ -1644,6 +1652,8 @@ The `fakeAsync` alternative, [covered below](guide/testing#fake-async), removes | |||||||
| 
 | 
 | ||||||
| ### _whenStable_ | ### _whenStable_ | ||||||
| 
 | 
 | ||||||
|  | ### _whenStable_ 方法 | ||||||
|  | 
 | ||||||
| The test must wait for the `getQuote` promise to resolve in the next turn of the JavaScript engine. | The test must wait for the `getQuote` promise to resolve in the next turn of the JavaScript engine. | ||||||
| 
 | 
 | ||||||
| 测试程序必须等待`getQuote`在JavaScript引擎的下一回合中被解析。 | 测试程序必须等待`getQuote`在JavaScript引擎的下一回合中被解析。 | ||||||
| @ -1767,6 +1777,8 @@ chained in a long sequence of promise callbacks. | |||||||
| 
 | 
 | ||||||
| ### _jasmine.done_ | ### _jasmine.done_ | ||||||
| 
 | 
 | ||||||
|  | ### _jasmine.done_ 方法 | ||||||
|  | 
 | ||||||
| While the `async` and `fakeAsync` functions greatly | While the `async` and `fakeAsync` functions greatly | ||||||
| simplify Angular asynchronous testing, | simplify Angular asynchronous testing, | ||||||
| you can still fall back to the traditional Jasmine asynchronous testing technique. | you can still fall back to the traditional Jasmine asynchronous testing technique. | ||||||
| @ -2032,6 +2044,8 @@ the test detects that value through its subscription to `selected`, and the test | |||||||
| 
 | 
 | ||||||
| ### _triggerEventHandler_ | ### _triggerEventHandler_ | ||||||
| 
 | 
 | ||||||
|  | ### _triggerEventHandler_ 方法 | ||||||
|  | 
 | ||||||
| The Angular `DebugElement.triggerEventHandler` can raise _any data-bound event_ by its _event name_. | The Angular `DebugElement.triggerEventHandler` can raise _any data-bound event_ by its _event name_. | ||||||
| The second parameter is the event object passed to the handler. | The second parameter is the event object passed to the handler. | ||||||
| 
 | 
 | ||||||
| @ -4903,6 +4917,8 @@ Here are the most useful methods for testers. | |||||||
| 
 | 
 | ||||||
| ### _DebugElement_ | ### _DebugElement_ | ||||||
| 
 | 
 | ||||||
|  | ### _DebugElement_ 方法 | ||||||
|  | 
 | ||||||
| The `DebugElement` provides crucial insights into the component's DOM representation. | The `DebugElement` provides crucial insights into the component's DOM representation. | ||||||
| 
 | 
 | ||||||
| `DebugElement`提供了对组件的DOM的访问。 | `DebugElement`提供了对组件的DOM的访问。 | ||||||
|  | |||||||
| @ -33,6 +33,8 @@ that are important to Angular developers, including details about the following | |||||||
| 
 | 
 | ||||||
| ## *tsconfig.json* | ## *tsconfig.json* | ||||||
| 
 | 
 | ||||||
|  | ## *tsconfig.json* 文件 | ||||||
|  | 
 | ||||||
| Typically, you add a TypeScript configuration file called `tsconfig.json` to your project to | Typically, you add a TypeScript configuration file called `tsconfig.json` to your project to | ||||||
| guide the compiler as it generates JavaScript files. | guide the compiler as it generates JavaScript files. | ||||||
| 
 | 
 | ||||||
| @ -165,6 +167,8 @@ The `node_modules/@angular/core/` folder of any Angular application contains sev | |||||||
| 
 | 
 | ||||||
| ### lib.d.ts | ### lib.d.ts | ||||||
| 
 | 
 | ||||||
|  | ### lib.d.ts 文件 | ||||||
|  | 
 | ||||||
| TypeScript includes a special declaration file called `lib.d.ts`. This file contains the ambient declarations for various common JavaScript constructs present in JavaScript runtimes and the DOM. | TypeScript includes a special declaration file called `lib.d.ts`. This file contains the ambient declarations for various common JavaScript constructs present in JavaScript runtimes and the DOM. | ||||||
| 
 | 
 | ||||||
| TypeScript带有一个特殊的声明文件,名为`lib.d.ts`。该文件包含了JavaScript运行库和DOM的各种常用JavaScript环境声明。 | TypeScript带有一个特殊的声明文件,名为`lib.d.ts`。该文件包含了JavaScript运行库和DOM的各种常用JavaScript环境声明。 | ||||||
|  | |||||||
| @ -407,6 +407,8 @@ Right-click `index.html` in Solution Explorer and select option `Set As Start Pa | |||||||
| 
 | 
 | ||||||
| ### To run in VS with F5 | ### To run in VS with F5 | ||||||
| 
 | 
 | ||||||
|  | // TODO: Translate | ||||||
|  | 
 | ||||||
| Most Visual Studio developers like to press the F5 key and see the IIS server come up.  | Most Visual Studio developers like to press the F5 key and see the IIS server come up.  | ||||||
| To use the IIS server with the QuickStart app, you must make the following three changes.  | To use the IIS server with the QuickStart app, you must make the following three changes.  | ||||||
| 
 | 
 | ||||||
|  | |||||||
| @ -453,6 +453,8 @@ Open a terminal window and install the npm packages. | |||||||
| 
 | 
 | ||||||
| ### Polyfills | ### Polyfills | ||||||
| 
 | 
 | ||||||
|  | ### Polyfills 填充库 | ||||||
|  | 
 | ||||||
| You'll need polyfills to run an Angular application in most browsers as explained | You'll need polyfills to run an Angular application in most browsers as explained | ||||||
| in the [Browser Support](guide/browser-support) guide. | in the [Browser Support](guide/browser-support) guide. | ||||||
| 
 | 
 | ||||||
| @ -556,6 +558,8 @@ and exports several objects as properties of a `module.exports` object. | |||||||
| 
 | 
 | ||||||
| #### _entry_ | #### _entry_ | ||||||
| 
 | 
 | ||||||
|  | #### _entry_ 入口 | ||||||
|  | 
 | ||||||
| The first export is the `entry` object: | The first export is the `entry` object: | ||||||
| 
 | 
 | ||||||
| 如上所述,第一个导出的对象是*entries*: | 如上所述,第一个导出的对象是*entries*: | ||||||
| @ -636,6 +640,8 @@ add `.css` and `.html` to the list. | |||||||
| 
 | 
 | ||||||
| #### _module.rules_ | #### _module.rules_ | ||||||
| 
 | 
 | ||||||
|  | #### _module.rules_ 规则 | ||||||
|  | 
 | ||||||
| Rules tell Webpack which loaders to use for each file, or module: | Rules tell Webpack which loaders to use for each file, or module: | ||||||
| 
 | 
 | ||||||
| Rules用来告诉Webpack加载不同文件或模块时该用哪个加载器。 | Rules用来告诉Webpack加载不同文件或模块时该用哪个加载器。 | ||||||
| @ -711,6 +717,8 @@ Multiple loaders can be chained using the array notation. | |||||||
| 
 | 
 | ||||||
| #### _plugins_ | #### _plugins_ | ||||||
| 
 | 
 | ||||||
|  | #### _插件_ | ||||||
|  | 
 | ||||||
| Finally, create instances of three plugins: | Finally, create instances of three plugins: | ||||||
| 
 | 
 | ||||||
| 最后,创建三个插件实例: | 最后,创建三个插件实例: | ||||||
| @ -727,6 +735,8 @@ Finally, create instances of three plugins: | |||||||
| 
 | 
 | ||||||
| #### *CommonsChunkPlugin* | #### *CommonsChunkPlugin* | ||||||
| 
 | 
 | ||||||
|  | #### *CommonsChunkPlugin* 插件 | ||||||
|  | 
 | ||||||
| The `app.js` bundle should contain only application code. All vendor code belongs in the `vendor.js` bundle.  | The `app.js` bundle should contain only application code. All vendor code belongs in the `vendor.js` bundle.  | ||||||
| 
 | 
 | ||||||
| `app.js`包应该只包含应用代码。所有第三方代码都应该放进`vendor.js`包中。 | `app.js`包应该只包含应用代码。所有第三方代码都应该放进`vendor.js`包中。 | ||||||
| @ -762,6 +772,8 @@ It would remove `polyfills` from `vendor` if they shared dependencies, which the | |||||||
| 
 | 
 | ||||||
| #### _HtmlWebpackPlugin_ | #### _HtmlWebpackPlugin_ | ||||||
| 
 | 
 | ||||||
|  | #### _HtmlWebpackPlugin_ 插件 | ||||||
|  | 
 | ||||||
| Webpack generates a number of js and CSS files. | Webpack generates a number of js and CSS files. | ||||||
| You _could_ insert them into the `index.html` _manually_. That would be tedious and error-prone. | You _could_ insert them into the `index.html` _manually_. That would be tedious and error-prone. | ||||||
| Webpack can inject those scripts and links for you with the `HtmlWebpackPlugin`. | Webpack can inject those scripts and links for you with the `HtmlWebpackPlugin`. | ||||||
|  | |||||||
| @ -247,6 +247,8 @@ move the display of *Heroes* out of `AppComponent` and into its own `HeroesCompo | |||||||
| 
 | 
 | ||||||
| ### *HeroesComponent* | ### *HeroesComponent* | ||||||
| 
 | 
 | ||||||
|  | ### *HeroesComponent* 组件 | ||||||
|  | 
 | ||||||
| `AppComponent` is already dedicated to *Heroes*. | `AppComponent` is already dedicated to *Heroes*. | ||||||
| Instead of moving the code out of `AppComponent`, rename it to `HeroesComponent` | Instead of moving the code out of `AppComponent`, rename it to `HeroesComponent` | ||||||
| and create a separate `AppComponent` shell. | and create a separate `AppComponent` shell. | ||||||
| @ -420,6 +422,8 @@ Angular 路由器是一个可选的外部 Angular NgModule,名叫`RouterModule | |||||||
| 
 | 
 | ||||||
| ### *<base href>* | ### *<base href>* | ||||||
| 
 | 
 | ||||||
|  | ### *<base href>* 组件 | ||||||
|  | 
 | ||||||
| Open `index.html` and ensure there is a `<base href="...">` element | Open `index.html` and ensure there is a `<base href="...">` element | ||||||
| (or a script that dynamically sets this element) | (or a script that dynamically sets this element) | ||||||
| at the top of the `<head>` section. | at the top of the `<head>` section. | ||||||
|  | |||||||
| @ -1,5 +1,7 @@ | |||||||
| # HTTP | # HTTP | ||||||
| 
 | 
 | ||||||
|  | # HTTP 服务 | ||||||
|  | 
 | ||||||
| In this page, you'll make the following improvements. | In this page, you'll make the following improvements. | ||||||
| 
 | 
 | ||||||
| 在这一章中,我们将进行如下增强: | 在这一章中,我们将进行如下增强: | ||||||
| @ -225,6 +227,8 @@ mock server. | |||||||
| 
 | 
 | ||||||
| ### HTTP Promise | ### HTTP Promise | ||||||
| 
 | 
 | ||||||
|  | ### Http 承诺(Promise) | ||||||
|  | 
 | ||||||
| The Angular `http.get` returns an RxJS `Observable`. | The Angular `http.get` returns an RxJS `Observable`. | ||||||
| *Observables* are a powerful way to manage asynchronous data flows. | *Observables* are a powerful way to manage asynchronous data flows. | ||||||
| You'll read about [Observables](tutorial/toh-pt6#observables) later in this page. | You'll read about [Observables](tutorial/toh-pt6#observables) later in this page. | ||||||
| @ -712,6 +716,8 @@ RxJS operator chaining makes response processing easy and readable. | |||||||
| 
 | 
 | ||||||
| ### HeroSearchComponent | ### HeroSearchComponent | ||||||
| 
 | 
 | ||||||
|  | ### HeroSearchComponent 组件 | ||||||
|  | 
 | ||||||
| Let's create a new `HeroSearchComponent` that calls this new `HeroSearchService`. | Let's create a new `HeroSearchComponent` that calls this new `HeroSearchService`. | ||||||
| 
 | 
 | ||||||
| 我们再创建一个新的`HeroSearchComponent`来调用这个新的`HeroSearchService`。 | 我们再创建一个新的`HeroSearchComponent`来调用这个新的`HeroSearchService`。 | ||||||
|  | |||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user