feat: 自动在中英文之间添加空格，以改善排版
This commit is contained in:
Zhicheng Wang
parent
545d4b6c69
commit
37e19cd50b
|
|
@ -7,7 +7,7 @@
|
|||
_Angular_ is the name for the Angular of today and tomorrow.
|
||||
_AngularJS_ is the name for all v1.x versions of Angular.
|
||||
|
||||
*Angular*这个名字专指现在和未来的 Angular 版本，而*AngularJS*专指 Angular 的所有 v1.x 版本。
|
||||
*Angular* 这个名字专指现在和未来的 Angular 版本，而 *AngularJS* 专指 Angular 的所有 v1.x 版本。
|
||||
|
||||
This guide helps you transition from AngularJS to Angular
|
||||
by mapping AngularJS syntax to the equivalent Angular syntax.
|
||||
|
|
@ -492,7 +492,7 @@ AngularJS 为模板提供了七十多个内置指令。
|
|||
In Angular, you use property binding; there is no built-in *hide* directive.
|
||||
For more information, see [ng-show](guide/ajs-quick-reference#ng-show).
|
||||
|
||||
在 Angular 中，并没有一个内置的*hide*指令，可以改用属性绑定。
|
||||
在 Angular 中，并没有一个内置的 *hide* 指令，可以改用属性绑定。
|
||||
参见[ng-show](guide/ajs-quick-reference#ng-show)了解更多。
|
||||
|
||||
</td>
|
||||
|
|
@ -544,7 +544,7 @@ AngularJS 为模板提供了七十多个内置指令。
|
|||
Angular 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 中，并没有内置的*href*指令，改用属性绑定。
|
||||
在 Angular 中，并没有内置的 *href* 指令，改用属性绑定。
|
||||
我们把元素的 `href` 属性放在方括号中，并把它设成一个引号中的模板表达式。
|
||||
|
||||
For more information see the [Property binding](guide/template-syntax#property-binding)
|
||||
|
|
@ -748,7 +748,7 @@ AngularJS 为模板提供了七十多个内置指令。
|
|||
Angular uses property binding; there is no built-in *show* directive.
|
||||
For hiding and showing elements, bind to the HTML `hidden` property.
|
||||
|
||||
在 Angular 中，并没有内置的*show*指令，可以改用属性绑定。
|
||||
在 Angular 中，并没有内置的 *show* 指令，可以改用属性绑定。
|
||||
要隐藏或显示一个元素，绑定到它的 `hidden` 属性就可以了。
|
||||
|
||||
To conditionally display an element, place the element's `hidden` property in square brackets and
|
||||
|
|
@ -800,7 +800,7 @@ AngularJS 为模板提供了七十多个内置指令。
|
|||
Angular 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 中，并没有一个内置的*src*指令，可以使用属性绑定。
|
||||
在 Angular 中，并没有一个内置的 *src* 指令，可以使用属性绑定。
|
||||
把 `src` 属性放到方括号中，并且把它设为一个引号中的绑定表达式。
|
||||
|
||||
For more information on property binding, see the [Property binding](guide/template-syntax#property-binding)
|
||||
|
|
|
|||
|
|
@ -137,7 +137,7 @@ they don't conflict with standard HTML attributes.
|
|||
This also reduces the risk of colliding with third-party directive names.
|
||||
The CLI added the `app` prefix for you.
|
||||
|
||||
尽管*highlight* 是一个比 *myHighlight* 更简洁的名字，而且它确实也能工作。
|
||||
尽管 *highlight* 是一个比 *myHighlight* 更简洁的名字，而且它确实也能工作。
|
||||
但是最佳实践是在选择器名字前面添加前缀，以确保它们不会与标准 HTML 属性冲突。
|
||||
它同时减少了与第三方指令名字发生冲突的危险。
|
||||
|
||||
|
|
|
|||
|
|
@ -255,7 +255,7 @@ and the method processes it:
|
|||
|
||||
Test that clicking the *Agree* and *Disagree* buttons update the appropriate counters:
|
||||
|
||||
测试确保点击*Agree*和*Disagree*按钮时，计数器被正确更新。
|
||||
测试确保点击 *Agree* 和 *Disagree* 按钮时，计数器被正确更新。
|
||||
|
||||
<code-example path="component-interaction/e2e/app.e2e-spec.ts" region="child-to-parent" title="component-interaction/e2e/app.e2e-spec.ts">
|
||||
|
||||
|
|
@ -331,7 +331,7 @@ Test that the seconds displayed in the parent template
|
|||
match the seconds displayed in the child's status message.
|
||||
Test also that clicking the *Stop* button pauses the countdown timer:
|
||||
|
||||
测试确保在父组件模板中显示的秒数和子组件状态信息里的秒数同步。它还会点击*Stop*按钮来停止倒计时：
|
||||
测试确保在父组件模板中显示的秒数和子组件状态信息里的秒数同步。它还会点击 *Stop* 按钮来停止倒计时：
|
||||
|
||||
<code-example path="component-interaction/e2e/app.e2e-spec.ts" region="countdown-timer-tests" title="component-interaction/e2e/app.e2e-spec.ts">
|
||||
|
||||
|
|
@ -361,7 +361,7 @@ must read or write child component values or must call child component methods.
|
|||
When the parent component *class* requires that kind of access,
|
||||
***inject*** the child component into the parent as a *ViewChild*.
|
||||
|
||||
当父组件*类*需要这种访问时，可以把子组件作为*ViewChild*，***注入***到父组件里面。
|
||||
当父组件*类*需要这种访问时，可以把子组件作为 *ViewChild*，***注入***到父组件里面。
|
||||
|
||||
The following example illustrates this technique with the same
|
||||
[Countdown Timer](guide/component-interaction#countdown-timer-example) example.
|
||||
|
|
@ -376,7 +376,7 @@ The child [CountdownTimerComponent](guide/component-interaction#countdown-timer-
|
|||
The switch from the *local variable* to the *ViewChild* technique
|
||||
is solely for the purpose of demonstration.
|
||||
|
||||
由*本地变量*切换到*ViewChild*技术的唯一目的就是做示范。
|
||||
由*本地变量*切换到 *ViewChild* 技术的唯一目的就是做示范。
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -504,7 +504,7 @@ The *History* log demonstrates that messages travel in both directions between
|
|||
the parent `MissionControlComponent` and the `AstronautComponent` children,
|
||||
facilitated by the service:
|
||||
|
||||
*History*日志证明了：在父组件 `MissionControlComponent` 和子组件 `AstronautComponent` 之间，信息通过该服务实现了双向传递。
|
||||
*History* 日志证明了：在父组件 `MissionControlComponent` 和子组件 `AstronautComponent` 之间，信息通过该服务实现了双向传递。
|
||||
|
||||
<figure>
|
||||
<img src="generated/images/guide/component-interaction/bidirectional-service.gif" alt="bidirectional-service">
|
||||
|
|
@ -517,7 +517,7 @@ facilitated by the service:
|
|||
Tests click buttons of both the parent `MissionControlComponent` and the `AstronautComponent` children
|
||||
and verify that the history meets expectations:
|
||||
|
||||
测试确保点击父组件 `MissionControlComponent` 和子组件 `AstronautComponent` 两个的组件的按钮时，*History*日志和预期的一样。
|
||||
测试确保点击父组件 `MissionControlComponent` 和子组件 `AstronautComponent` 两个的组件的按钮时，*History* 日志和预期的一样。
|
||||
|
||||
<code-example path="component-interaction/e2e/app.e2e-spec.ts" region="bidirectional-service" title="component-interaction/e2e/app.e2e-spec.ts">
|
||||
|
||||
|
|
|
|||
|
|
@ -656,7 +656,7 @@ The code behind it gives you plenty to think about.
|
|||
|
||||
#### The *provide* object literal
|
||||
|
||||
#### *provide*对象
|
||||
#### *provide* 对象
|
||||
|
||||
The `provide` object literal takes a *token* and a *definition object*.
|
||||
The *token* is usually a class but [it doesn't have to be](guide/dependency-injection-in-action#tokens).
|
||||
|
|
@ -911,7 +911,7 @@ for the full source code.
|
|||
|
||||
## Provider token alternatives: the *class-interface* and *InjectionToken*
|
||||
|
||||
## 备选提供商令牌：*类-接口*和*InjectionToken*
|
||||
## 备选提供商令牌：*类-接口*和 *InjectionToken*
|
||||
|
||||
Angular dependency injection is easiest when the provider *token* is a class
|
||||
that is also the type of the returned dependency object, or what you usually call the *service*.
|
||||
|
|
@ -977,7 +977,7 @@ Such a narrowing interface helps decouple the concrete class from its consumers.
|
|||
|
||||
#### Why *MinimalLogger* is a class and not a TypeScript interface
|
||||
|
||||
#### 为什么*MinimalLogger*是一个类而不是一个 TypeScript 接口
|
||||
#### 为什么 *MinimalLogger* 是一个类而不是一个 TypeScript 接口
|
||||
|
||||
You can't use an interface as a provider token because
|
||||
interfaces are not JavaScript objects.
|
||||
|
|
@ -1033,7 +1033,7 @@ The `InjectionToken` has these characteristics.
|
|||
You encountered them twice in the *Hero of the Month* example,
|
||||
in the *title* value provider and in the *runnersUp* factory provider.
|
||||
|
||||
`InjectionToken` 具有这些特征。在*Hero of the Month*例子中遇见它们两次，一个是*title*的值，一个是*runnersUp* 工厂提供商。
|
||||
`InjectionToken` 具有这些特征。在*Hero of the Month*例子中遇见它们两次，一个是 *title* 的值，一个是 *runnersUp* 工厂提供商。
|
||||
|
||||
<code-example path="dependency-injection-in-action/src/app/hero-of-the-month.component.ts" region="provide-injection-token" title="dependency-injection-in-action/src/app/hero-of-the-month.component.ts" linenums="false">
|
||||
|
||||
|
|
@ -1191,7 +1191,7 @@ In the following example, the parent `AlexComponent` has several children includ
|
|||
*Cathy* reports whether or not she has access to *Alex*
|
||||
after injecting an `AlexComponent` into her constructor:
|
||||
|
||||
在注入*AlexComponent` 进来后，*Cathy*报告它是否对*Alex*有访问权：
|
||||
在注入*AlexComponent` 进来后，*Cathy* 报告它是否对 *Alex* 有访问权：
|
||||
|
||||
<code-example path="dependency-injection-in-action/src/app/parent-finder.component.ts" region="cathy" title="parent-finder.component.ts (CathyComponent)" linenums="false">
|
||||
|
||||
|
|
@ -1286,7 +1286,7 @@ The parent must cooperate by providing an *alias* to itself in the name of a *cl
|
|||
Recall that Angular always adds a component instance to its own injector;
|
||||
that's why you could inject *Alex* into *Cathy* [earlier](guide/dependency-injection-in-action#known-parent).
|
||||
|
||||
请记住 Angular 总是从它自己的注入器添加一个组件实例；这就是为什么在[之前](guide/dependency-injection-in-action#known-parent)可以*Alex*注入到*Carol*。
|
||||
请记住 Angular 总是从它自己的注入器添加一个组件实例；这就是为什么在[之前](guide/dependency-injection-in-action#known-parent)可以 *Alex* 注入到 *Carol*。
|
||||
|
||||
Write an [*alias provider*](guide/dependency-injection-in-action#useexisting)—a `provide` object literal with a `useExisting`
|
||||
definition—that creates an *alternative* way to inject the same component instance
|
||||
|
|
@ -1309,7 +1309,7 @@ The [*forwardRef*](guide/dependency-injection-in-action#forwardref) breaks the c
|
|||
*Carol*, the third of *Alex*'s child components, injects the parent into its `parent` parameter,
|
||||
the same way you've done it before:
|
||||
|
||||
*Carol*，*Alex*的第三个子组件，把父级注入到了自己的 `parent` 参数，和之前做的一样：
|
||||
*Carol*，*Alex* 的第三个子组件，把父级注入到了自己的 `parent` 参数，和之前做的一样：
|
||||
|
||||
<code-example path="dependency-injection-in-action/src/app/parent-finder.component.ts" region="carol-class" title="parent-finder.component.ts (CarolComponent class)" linenums="false">
|
||||
|
||||
|
|
@ -1317,7 +1317,7 @@ the same way you've done it before:
|
|||
|
||||
Here's *Alex* and family in action:
|
||||
|
||||
下面是*Alex*和其家庭的运行结果：
|
||||
下面是 *Alex* 和其家庭的运行结果：
|
||||
|
||||
<figure>
|
||||
<img src="generated/images/guide/dependency-injection-in-action/alex.png" alt="Alex in action">
|
||||
|
|
@ -1332,17 +1332,17 @@ Here's *Alex* and family in action:
|
|||
Imagine one branch of a component hierarchy: *Alice* -> *Barry* -> *Carol*.
|
||||
Both *Alice* and *Barry* implement the `Parent` *class-interface*.
|
||||
|
||||
想象组件树中的一个分支为：*Alice* -> *Barry* -> *Carol*。*Alice*和*Barry*都实现了这个 `Parent`*类-接口*。
|
||||
想象组件树中的一个分支为：*Alice* -> *Barry* -> *Carol*。*Alice* 和 *Barry* 都实现了这个 `Parent`*类-接口*。
|
||||
|
||||
*Barry* is the problem. He needs to reach his parent, *Alice*, and also be a parent to *Carol*.
|
||||
That means he must both *inject* the `Parent` *class-interface* to get *Alice* and
|
||||
*provide* a `Parent` to satisfy *Carol*.
|
||||
|
||||
*Barry*是个问题。它需要访问它的父组件*Alice*，但同时它也是*Carol*的父组件。这个意味着它必须同时*注入*`Parent`*类-接口*来获取*Alice*，和*提供*一个 `Parent` 来满足*Carol*。
|
||||
*Barry* 是个问题。它需要访问它的父组件 *Alice*，但同时它也是 *Carol* 的父组件。这个意味着它必须同时*注入*`Parent`*类-接口*来获取 *Alice*，和*提供*一个 `Parent` 来满足 *Carol*。
|
||||
|
||||
Here's *Barry*:
|
||||
|
||||
下面是*Barry*的代码：
|
||||
下面是 *Barry* 的代码：
|
||||
|
||||
<code-example path="dependency-injection-in-action/src/app/parent-finder.component.ts" region="barry" title="parent-finder.component.ts (BarryComponent)" linenums="false">
|
||||
|
||||
|
|
@ -1351,12 +1351,12 @@ Here's *Barry*:
|
|||
*Barry*'s `providers` array looks just like [*Alex*'s](guide/dependency-injection-in-action#alex-providers).
|
||||
If you're going to keep writing [*alias providers*](guide/dependency-injection-in-action#useexisting) like this you should create a [helper function](guide/dependency-injection-in-action#provideparent).
|
||||
|
||||
*Barry*的 `providers` 数组看起来很像[*Alex*的那个](guide/dependency-injection-in-action#alex-providers).
|
||||
*Barry* 的 `providers` 数组看起来很像[*Alex* 的那个](guide/dependency-injection-in-action#alex-providers).
|
||||
如果准备一直像这样编写[*别名提供商*](guide/dependency-injection-in-action#useexisting)的话，我们应该建立一个[帮助函数](guide/dependency-injection-in-action#provideparent)。
|
||||
|
||||
For now, focus on *Barry*'s constructor:
|
||||
|
||||
眼下，请注意*Barry*的构造函数：
|
||||
眼下，请注意 *Barry* 的构造函数：
|
||||
|
||||
<code-tabs>
|
||||
|
||||
|
|
@ -1372,7 +1372,7 @@ For now, focus on *Barry*'s constructor:
|
|||
|
||||
It's identical to *Carol*'s constructor except for the additional `@SkipSelf` decorator.
|
||||
|
||||
除额外添加了一个的 `@SkipSelf` 外，它和*Carol*的构造函数一样。
|
||||
除额外添加了一个的 `@SkipSelf` 外，它和 *Carol* 的构造函数一样。
|
||||
|
||||
`@SkipSelf` is essential for two reasons:
|
||||
|
||||
|
|
@ -1393,7 +1393,7 @@ which *is* what parent means.
|
|||
|
||||
Here's *Alice*, *Barry* and family in action:
|
||||
|
||||
这里是*Alice*，*Barry*和该家庭的操作演示：
|
||||
这里是 *Alice*，*Barry* 和该家庭的操作演示：
|
||||
|
||||
<figure>
|
||||
<img src="generated/images/guide/dependency-injection-in-action/alice.png" alt="Alice in action">
|
||||
|
|
@ -1403,7 +1403,7 @@ Here's *Alice*, *Barry* and family in action:
|
|||
|
||||
### The *Parent* class-interface
|
||||
|
||||
### *Parent*类-接口
|
||||
### *Parent* 类-接口
|
||||
|
||||
You [learned earlier](guide/dependency-injection-in-action#class-interface) that a *class-interface* is an abstract class used as an interface rather than as a base class.
|
||||
|
||||
|
|
|
|||
|
|
@ -200,7 +200,7 @@ This app uses more terse "variable assignment" style simply for brevity.
|
|||
|
||||
## Showing an array property with ***ngFor**
|
||||
|
||||
## 使用***ngFor***显示数组属性
|
||||
## 使用 ***ngFor*** 显示数组属性
|
||||
|
||||
To display a list of heroes, begin by adding an array of hero names to the component and redefine `myHero` to be the first name in the array.
|
||||
|
||||
|
|
|
|||
|
|
@ -184,7 +184,7 @@ The `ngSwitch` determines which type of question to display.
|
|||
In both components you're relying on Angular's **formGroup** to connect the template HTML to the
|
||||
underlying control objects, populated from the question model with display and validation rules.
|
||||
|
||||
在这两个组件中，我们依赖 Angular 的**formGroup**来把模板 HTML 和底层控件对象连接起来，该对象从问卷问题模型里获取渲染和验证规则。
|
||||
在这两个组件中，我们依赖 Angular 的 **formGroup** 来把模板 HTML 和底层控件对象连接起来，该对象从问卷问题模型里获取渲染和验证规则。
|
||||
|
||||
`formControlName` and `formGroup` are directives defined in
|
||||
`ReactiveFormsModule`. The templates can access these directives
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ There are messages for `required`, `minlength`, and `forbiddenName`.
|
|||
|
||||
#### Why check _dirty_ and _touched_?
|
||||
|
||||
#### 为何检查**dirty**和**touched**？
|
||||
#### 为何检查 **dirty** 和 **touched**？
|
||||
|
||||
You may not want your application to display errors before the user has a chance to edit the form.
|
||||
The checks for `dirty` and `touched` prevent errors from showing until the user
|
||||
|
|
|
|||
|
|
@ -1183,7 +1183,7 @@ that clears the `submitted` flag.
|
|||
|
||||
When you click the *Edit* button, this block disappears and the editable form reappears.
|
||||
|
||||
当点*Edit*按钮时，这个只读块消失了，可编辑的表单重新出现了。
|
||||
当点 *Edit* 按钮时，这个只读块消失了，可编辑的表单重新出现了。
|
||||
|
||||
## Summary
|
||||
|
||||
|
|
@ -1224,7 +1224,7 @@ framework features to provide support for data modification, validation, and mor
|
|||
|
||||
* Controlling the *Submit* button's enabled state by binding to `NgForm` validity.
|
||||
|
||||
通过绑定到 `NgForm` 的有效性状态，控制*Submit*按钮的禁用状态。
|
||||
通过绑定到 `NgForm` 的有效性状态，控制 *Submit* 按钮的禁用状态。
|
||||
|
||||
* Custom CSS classes that provide visual feedback to users about invalid controls.
|
||||
|
||||
|
|
|
|||
|
|
@ -990,7 +990,7 @@ For more information, see the [Routing & Navigation](guide/router) page.
|
|||
A way to group related *npm* packages.
|
||||
Read more at the [npm-scope](https://docs.npmjs.com/misc/scope) page.
|
||||
|
||||
对相关的*npm*包进行分组的一种方式，参阅[npm-scope](https://docs.npmjs.com/misc/scope)。
|
||||
对相关的 *npm* 包进行分组的一种方式，参阅[npm-scope](https://docs.npmjs.com/misc/scope)。
|
||||
|
||||
NgModules are delivered within *scoped packages* such as `@angular/core`,
|
||||
`@angular/common`, `@angular/platform-browser-dynamic`, `@angular/http`, and `@angular/router`.
|
||||
|
|
|
|||
|
|
@ -518,7 +518,7 @@ You can also nest different ICU expressions together, as shown in this example:
|
|||
|
||||
## Create a translation source file with _ng xi18n_
|
||||
|
||||
## 使用*ng-xi18n*工具创建翻译源文件
|
||||
## 使用 *ng-xi18n* 工具创建翻译源文件
|
||||
|
||||
Use the `ng xi18n` command provided by the CLI to extract the text messages marked with `i18n` into
|
||||
a translation source file.
|
||||
|
|
|
|||
|
|
@ -568,7 +568,7 @@ The next examples focus on hook details.
|
|||
|
||||
## Spying *OnInit* and *OnDestroy*
|
||||
|
||||
## 窥探*OnInit*和*OnDestroy*
|
||||
## 窥探 *OnInit* 和 *OnDestroy*
|
||||
|
||||
Go undercover with these two spy hooks to discover when an element is initialized or destroyed.
|
||||
|
||||
|
|
@ -634,7 +634,7 @@ The *Reset* button clears the `heroes` list.
|
|||
Angular removes all hero `<div>` elements from the DOM and destroys their spy directives at the same time.
|
||||
The spy's `ngOnDestroy()` method reports its last moments.
|
||||
|
||||
*Reset*按钮清除了这个 `heroes` 列表。
|
||||
*Reset* 按钮清除了这个 `heroes` 列表。
|
||||
Angular 从 DOM 中移除了所有英雄的 div，并且同时销毁了附加在这些 div 上的侦探指令。
|
||||
侦探的 `ngOnDestroy()` 方法汇报了它自己的临终时刻。
|
||||
|
||||
|
|
@ -781,7 +781,7 @@ The log entries appear as the string value of the *power* property changes.
|
|||
But the `ngOnChanges` does not catch changes to `hero.name`
|
||||
That's surprising at first.
|
||||
|
||||
当*power*属性的字符串值变化时，相应的日志就出现了。
|
||||
当 *power* 属性的字符串值变化时，相应的日志就出现了。
|
||||
但是 `ngOnChanges` 并没有捕捉到 `hero.name` 的变化。
|
||||
这是第一个意外。
|
||||
|
||||
|
|
@ -815,7 +815,7 @@ Use the `DoCheck` hook to detect and act upon changes that Angular doesn't catch
|
|||
|
||||
The *DoCheck* sample extends the *OnChanges* sample with the following `ngDoCheck()` hook:
|
||||
|
||||
*DoCheck*范例通过下面的 `ngDoCheck()` 实现扩展了*OnChanges*范例：
|
||||
*DoCheck* 范例通过下面的 `ngDoCheck()` 实现扩展了 *OnChanges* 范例：
|
||||
|
||||
<code-example path="lifecycle-hooks/src/app/do-check.component.ts" region="ng-do-check" title="DoCheckComponent (ngDoCheck)" linenums="false"></code-example>
|
||||
|
||||
|
|
@ -859,7 +859,7 @@ Clearly our implementation must be very lightweight or the user experience suffe
|
|||
The *AfterView* sample explores the `AfterViewInit()` and `AfterViewChecked()` hooks that Angular calls
|
||||
*after* it creates a component's child views.
|
||||
|
||||
*AfterView*例子展示了 `AfterViewInit()` 和 `AfterViewChecked()` 钩子，Angular 会在每次创建了组件的子视图后调用它们。
|
||||
*AfterView* 例子展示了 `AfterViewInit()` 和 `AfterViewChecked()` 钩子，Angular 会在每次创建了组件的子视图后调用它们。
|
||||
|
||||
Here's a child view that displays a hero's name in an `<input>`:
|
||||
|
||||
|
|
@ -912,7 +912,7 @@ for one turn of the browser's JavaScript cycle and that's just long enough.
|
|||
|
||||
Here's *AfterView* in action:
|
||||
|
||||
这里是*AfterView*的操作演示：
|
||||
这里是 *AfterView* 的操作演示：
|
||||
|
||||
<figure>
|
||||
<img src='generated/images/guide/lifecycle-hooks/after-view-anim.gif' alt="AfterView">
|
||||
|
|
@ -933,7 +933,7 @@ Write lean hook methods to avoid performance problems.
|
|||
The *AfterContent* sample explores the `AfterContentInit()` and `AfterContentChecked()` hooks that Angular calls
|
||||
*after* Angular projects external content into the component.
|
||||
|
||||
*AfterContent*例子展示了 `AfterContentInit()` 和 `AfterContentChecked()` 钩子，Angular 会在外来内容被投影到组件中*之后*调用它们。
|
||||
*AfterContent* 例子展示了 `AfterContentInit()` 和 `AfterContentChecked()` 钩子，Angular 会在外来内容被投影到组件中*之后*调用它们。
|
||||
|
||||
{@a content-projection}
|
||||
|
||||
|
|
@ -950,7 +950,7 @@ into the component's template in a designated spot.
|
|||
|
||||
AngularJS developers know this technique as *transclusion*.
|
||||
|
||||
AngularJS 的开发者大概知道一项叫做*transclusion*的技术，对，这就是它的马甲。
|
||||
AngularJS 的开发者大概知道一项叫做 *transclusion* 的技术，对，这就是它的马甲。
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -1013,23 +1013,23 @@ In this case, the projected content is the `<my-child>` from the parent.
|
|||
*AfterContent* hooks are similar to the *AfterView* hooks.
|
||||
The key difference is in the child component.
|
||||
|
||||
*AfterContent*钩子和*AfterView*相似。关键的不同点是子组件的类型不同。
|
||||
*AfterContent* 钩子和 *AfterView* 相似。关键的不同点是子组件的类型不同。
|
||||
|
||||
* The *AfterView* hooks concern `ViewChildren`, the child components whose element tags
|
||||
appear *within* the component's template.
|
||||
|
||||
*AfterView*钩子所关心的是 `ViewChildren`，这些子组件的元素标签会出现在该组件的模板*里面*。
|
||||
*AfterView* 钩子所关心的是 `ViewChildren`，这些子组件的元素标签会出现在该组件的模板*里面*。
|
||||
|
||||
* The *AfterContent* hooks concern `ContentChildren`, the child components that Angular
|
||||
projected into the component.
|
||||
|
||||
*AfterContent*钩子所关心的是 `ContentChildren`，这些子组件被 Angular 投影进该组件中。
|
||||
*AfterContent* 钩子所关心的是 `ContentChildren`，这些子组件被 Angular 投影进该组件中。
|
||||
|
||||
The following *AfterContent* hooks take action based on changing values in a *content child*,
|
||||
which can only be reached by querying for them via the property decorated with
|
||||
[@ContentChild](api/core/ContentChild).
|
||||
|
||||
下列*AfterContent*钩子基于*子级内容*中值的变化而采取相应的行动，这里我们只能通过带有[@ContentChild](api/core/ContentChild)装饰器的属性来查询到“子级内容”。
|
||||
下列 *AfterContent* 钩子基于*子级内容*中值的变化而采取相应的行动，这里我们只能通过带有[@ContentChild](api/core/ContentChild)装饰器的属性来查询到“子级内容”。
|
||||
|
||||
<code-example path="lifecycle-hooks/src/app/after-content.component.ts" region="hooks" title="AfterContentComponent (class excerpts)" linenums="false"></code-example>
|
||||
|
||||
|
|
@ -1037,7 +1037,7 @@ which can only be reached by querying for them via the property decorated with
|
|||
|
||||
### No unidirectional flow worries with _AfterContent_
|
||||
|
||||
### 使用**AfterContent**时，无需担心单向数据流规则
|
||||
### 使用 **AfterContent** 时，无需担心单向数据流规则
|
||||
|
||||
This component's `doSomething()` method update's the component's data-bound `comment` property immediately.
|
||||
There's no [need to wait](guide/lifecycle-hooks#wait-a-tick).
|
||||
|
|
@ -1050,6 +1050,6 @@ Angular completes composition of the projected content *before* finishing the co
|
|||
There is a small window between the `AfterContent...` and `AfterView...` hooks to modify the host view.
|
||||
|
||||
|
||||
回忆一下，Angular 在每次调用*AfterView*钩子之前也会同时调用*AfterContent*。
|
||||
回忆一下，Angular 在每次调用 *AfterView* 钩子之前也会同时调用 *AfterContent*。
|
||||
Angular 在完成当前组件的视图合成之前，就已经完成了被投影内容的合成。
|
||||
所以我们仍然有机会去修改那个视图。
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ This page answers the questions many developers ask about NgModule design and im
|
|||
|
||||
## What classes should I add to the `declarations` array?
|
||||
|
||||
## 我应该把哪些类加到*declarations*中？
|
||||
## 我应该把哪些类加到 *declarations* 中？
|
||||
|
||||
Add [declarable](guide/bootstrapping#the-declarations-array) classes—components, directives, and pipes—to a `declarations` list.
|
||||
|
||||
|
|
@ -90,7 +90,7 @@ strings, numbers, functions, entity models, configurations, business logic, and
|
|||
|
||||
## Why list the same component in multiple `NgModule` properties?
|
||||
|
||||
## 为什么要把同一个组件声明在不同的*NgModule*属性中？
|
||||
## 为什么要把同一个组件声明在不同的 *NgModule* 属性中？
|
||||
|
||||
`AppComponent` is often listed in both `declarations` and `bootstrap`.
|
||||
You might see the same component listed in `declarations`, `exports`, and `entryComponents`.
|
||||
|
|
@ -178,7 +178,7 @@ Import only [BrowserModule](guide/ngmodule-faq#q-browser-vs-common-module) in th
|
|||
|
||||
## Should I import `BrowserModule` or `CommonModule`?
|
||||
|
||||
## 我应该导入*BrowserModule*还是*CommonModule*？
|
||||
## 我应该导入 *BrowserModule* 还是 *CommonModule*？
|
||||
|
||||
The root application module, `AppModule`, of almost every browser application
|
||||
should import `BrowserModule` from `@angular/platform-browser`.
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ The `package.json` includes two sets of packages,
|
|||
The *dependencies* are essential to *running* the application.
|
||||
The *devDependencies* are only necessary to *develop* the application.
|
||||
|
||||
**dependencies**是**运行**应用的基础，而**devDependencies**只有在**开发**应用时才会用到。
|
||||
**dependencies** 是**运行**应用的基础，而 **devDependencies** 只有在**开发**应用时才会用到。
|
||||
|
||||
{@a dependencies}
|
||||
|
||||
|
|
|
|||
|
|
@ -232,7 +232,7 @@ Your pipe has one such parameter: the `exponent`.
|
|||
|
||||
## The *PipeTransform* interface
|
||||
|
||||
## *PipeTransform*接口
|
||||
## *PipeTransform* 接口
|
||||
|
||||
The `transform` method is essential to a pipe.
|
||||
The `PipeTransform` *interface* defines that method and guides both tooling and the compiler.
|
||||
|
|
@ -745,7 +745,7 @@ Try writing a custom pipe and perhaps contributing it to the community.
|
|||
|
||||
## Appendix: No *FilterPipe* or *OrderByPipe*
|
||||
|
||||
## 附录：没有*FilterPipe*或者*OrderByPipe*
|
||||
## 附录：没有 *FilterPipe* 或者 *OrderByPipe*
|
||||
|
||||
Angular doesn't provide pipes for filtering or sorting lists.
|
||||
Developers familiar with AngularJS know these as `filter` and `orderBy`.
|
||||
|
|
|
|||
|
|
@ -461,7 +461,7 @@ them within a parent `FormGroup`.
|
|||
This is simple to do. To add a `FormGroup`, add it to the imports section
|
||||
of `hero-detail.component.ts`:
|
||||
|
||||
通常，如果有多个*FormControl*，我们会希望把它们注册进一个父 `FormGroup` 中。这很容易。只要把它加入 `hero-detail.component.ts` 的 `import` 区就可以了。
|
||||
通常，如果有多个 *FormControl*，我们会希望把它们注册进一个父 `FormGroup` 中。这很容易。只要把它加入 `hero-detail.component.ts` 的 `import` 区就可以了。
|
||||
|
||||
<code-example path="reactive-forms/src/app/hero-detail/hero-detail-2.component.ts" region="imports" title="src/app/hero-detail/hero-detail.component.ts" linenums="false">
|
||||
|
||||
|
|
@ -524,7 +524,7 @@ not Angular.
|
|||
Like the `form-control` class, it _styles_ the form
|
||||
but in no way impacts its logic.
|
||||
|
||||
请无视*CSS*类 `form-group`，它属于<a href="http://getbootstrap.com/" target="_blank" title="Bootstrap CSS">Bootstrap CSS library</a>而不是 Angular。
|
||||
请无视 *CSS* 类 `form-group`，它属于<a href="http://getbootstrap.com/" target="_blank" title="Bootstrap CSS">Bootstrap CSS library</a>而不是 Angular。
|
||||
就像 `form-control` 类一样，它只是为表单添加样式，而对表单逻辑毫无影响。
|
||||
|
||||
</div>
|
||||
|
|
@ -565,7 +565,7 @@ Piping it through the `JsonPipe` renders the model as JSON in the browser:
|
|||
The initial `name` property value is the empty string.
|
||||
Type into the _name_ input box and watch the keystokes appear in the JSON.
|
||||
|
||||
最初的 `name` 属性是个空字符串，在*name*输入框中输入之后，可以看到这些按键出现在了 JSON 中。
|
||||
最初的 `name` 属性是个空字符串，在 *name* 输入框中输入之后，可以看到这些按键出现在了 JSON 中。
|
||||
|
||||
Great! You have the basics of a form.
|
||||
|
||||
|
|
@ -759,7 +759,7 @@ They are the Angular directives that bind the HTML controls to the
|
|||
Angular `FormGroup` and `FormControl` properties in the component class.
|
||||
|
||||
*注意*：不用管这些脚本中提到的 `form-group`、`form-control`、`center-block` 和 `checkbox` 等。
|
||||
它们是来自*Bootstrap*的 CSS 类，Angular 本身不会管它们。
|
||||
它们是来自 *Bootstrap* 的 CSS 类，Angular 本身不会管它们。
|
||||
注意 `formGroupName` 和 `formControlName` 属性。
|
||||
他们是 Angular 指令，用于把相应的 HTML 控件绑定到组件中的 `FormGroup` 和 `FormControl` 类型的属性上。
|
||||
|
||||
|
|
@ -1755,7 +1755,7 @@ The `prepareSaveHero` method makes copies of the form model's `secretLairs` obje
|
|||
|
||||
The user cancels changes and reverts the form to the original state by pressing the _Revert_ button.
|
||||
|
||||
用户可以撤销修改，并通过点击*Revert*按钮来把表单恢复到原始状态。
|
||||
用户可以撤销修改，并通过点击 *Revert* 按钮来把表单恢复到原始状态。
|
||||
|
||||
Reverting is easy. Simply re-execute the `ngOnChanges` method that built the _form model_ from the original, unchanged `hero` _data model_.
|
||||
|
||||
|
|
|
|||
|
|
@ -198,7 +198,7 @@ The wildcard route comes last because it matches _every URL_ and should be selec
|
|||
|
||||
If you need to see what events are happening during the navigation lifecycle, there is the **enableTracing** option as part of the router's default configuration. This outputs each router event that took place during each navigation lifecycle to the browser console. This should only be used for _debugging_ purposes. You set the `enableTracing: true` option in the object passed as the second argument to the `RouterModule.forRoot()` method.
|
||||
|
||||
如果我们想要看到在导航的生命周期中发生过哪些事件，可以使用路由器默认配置中的**enableTracing**选项。它会把每个导航生命周期中的事件输出到浏览器的控制台。
|
||||
如果我们想要看到在导航的生命周期中发生过哪些事件，可以使用路由器默认配置中的 **enableTracing** 选项。它会把每个导航生命周期中的事件输出到浏览器的控制台。
|
||||
这应该只用于*调试*。我们只需要把 `enableTracing: true` 选项作为第二个参数传给 `RouterModule.forRoot()` 方法就可以了。
|
||||
|
||||
{@a basics-router-outlet}
|
||||
|
|
@ -259,7 +259,7 @@ The router adds the `active` CSS class to the element when the associated *Route
|
|||
You can add this directive to the anchor or to its parent element.
|
||||
|
||||
每个 `a` 标签上的**`RouterLinkActive`**指令可以帮用户在外观上区分出当前选中的“活动”路由。
|
||||
当与它关联的*RouterLink*被激活时，路由器会把 CSS 类 `active` 添加到这个元素上。
|
||||
当与它关联的 *RouterLink* 被激活时，路由器会把 CSS 类 `active` 添加到这个元素上。
|
||||
我们可以把该指令添加到 `a` 元素或它的父元素上。
|
||||
|
||||
{@a basics-router-state}
|
||||
|
|
@ -969,7 +969,7 @@ Along the way, it highlights design decisions and describes key features of the
|
|||
|
||||
* Navigating to a component (*Heroes* link to "Heroes List").
|
||||
|
||||
导航到组件（*Heroes*链接到“英雄列表”组件）。
|
||||
导航到组件（*Heroes* 链接到“英雄列表”组件）。
|
||||
|
||||
* Including a route parameter (passing the Hero `id` while routing to the "Hero Detail").
|
||||
|
||||
|
|
@ -1317,7 +1317,7 @@ Providing the `RouterModule` in the `AppModule` makes the Router available every
|
|||
|
||||
### The *AppComponent* shell
|
||||
|
||||
### *AppComponent*外壳组件
|
||||
### *AppComponent* 外壳组件
|
||||
|
||||
The root `AppComponent` is the application shell. It has a title, a navigation bar with two links,
|
||||
and a *router outlet* where the router swaps views on and off the page. Here's what you get:
|
||||
|
|
@ -2426,7 +2426,7 @@ Don't analyze the URL. Let the router do it.
|
|||
The router extracts the route parameter (`id:15`) from the URL and supplies it to
|
||||
the `HeroDetailComponent` via the `ActivatedRoute` service.
|
||||
|
||||
路由器从 URL 中解析出路由参数（`id:15`），并通过**ActivatedRoute**服务来把它提供给 `HeroDetailComponent` 组件。
|
||||
路由器从 URL 中解析出路由参数（`id:15`），并通过 **ActivatedRoute** 服务来把它提供给 `HeroDetailComponent` 组件。
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -2910,7 +2910,7 @@ as this one can.
|
|||
|
||||
### Route parameters in the *ActivatedRoute* service
|
||||
|
||||
### *ActivatedRoute*服务中的路由参数
|
||||
### *ActivatedRoute* 服务中的路由参数
|
||||
|
||||
The list of heroes is unchanged. No hero row is highlighted.
|
||||
|
||||
|
|
@ -3902,7 +3902,7 @@ The interesting part of the URL follows the `...`:
|
|||
|
||||
Click the _Heroes_ link and look at the URL again.
|
||||
|
||||
点击*Heroes*链接，并再次查看 URL：
|
||||
点击 *Heroes* 链接，并再次查看 URL：
|
||||
|
||||
<code-example>
|
||||
|
||||
|
|
@ -3973,7 +3973,7 @@ this one includes an object with an `outlets` property.
|
|||
The `outlets` property value is another object with outlet names for keys.
|
||||
The only named outlet is `'popup'`.
|
||||
|
||||
就像在 `AppComponent` 中绑定到的*Contact* `RouterLink` 一样，它也包含了一个带 `outlets` 属性的对象。
|
||||
就像在 `AppComponent` 中绑定到的 *Contact* `RouterLink` 一样，它也包含了一个带 `outlets` 属性的对象。
|
||||
`outlets` 属性的值是另一个对象，该对象用一些出口名称作为属性名。
|
||||
唯一的命名出口是 `'popup'`。
|
||||
|
||||
|
|
@ -4244,8 +4244,8 @@ property but it's not using a `component`.
|
|||
You haven't made a mistake in the configuration.
|
||||
You've defined a _component-less_ route.
|
||||
|
||||
来看 `AdminComponent` 下的子路由，我们有一个带**path**和**children**的子路由，
|
||||
但它没有使用**component**。这并不是配置中的失误，而是在使用**无组件**路由。
|
||||
来看 `AdminComponent` 下的子路由，我们有一个带 **path** 和 **children** 的子路由，
|
||||
但它没有使用 **component**。这并不是配置中的失误，而是在使用**无组件**路由。
|
||||
|
||||
The goal is to group the `Crisis Center` management routes under the `admin` path.
|
||||
You don't need a component to do it.
|
||||
|
|
@ -4323,7 +4323,7 @@ The admin feature is now protected by the guard, albeit protected poorly.
|
|||
|
||||
#### Teach *AuthGuard* to authenticate
|
||||
|
||||
#### 教*AuthGuard*进行认证
|
||||
#### 教 *AuthGuard* 进行认证
|
||||
|
||||
Make the `AuthGuard` at least pretend to authenticate.
|
||||
|
||||
|
|
@ -4386,7 +4386,7 @@ This secondary navigation automatically cancels the current navigation; `checkLo
|
|||
|
||||
#### Add the *LoginComponent*
|
||||
|
||||
#### 添加*LoginComponent*
|
||||
#### 添加 *LoginComponent*
|
||||
|
||||
You need a `LoginComponent` for the user to log in to the app. After logging in, you'll redirect
|
||||
to the stored URL if available, or use the default URL.
|
||||
|
|
@ -4544,7 +4544,7 @@ Instead, the app updates the entity when the user presses the *Save* button and
|
|||
discards the changes when the user presses the *Cancel* button.
|
||||
|
||||
用户在 `CrisisDetailComponent` 中更新危机信息。
|
||||
与 `HeroDetailComponent` 不同，用户的改动不会立即更新危机的实体对象。当用户按下了*Save*按钮时，我们就更新这个实体对象；如果按了*Cancel*按钮，那就放弃这些更改。
|
||||
与 `HeroDetailComponent` 不同，用户的改动不会立即更新危机的实体对象。当用户按下了 *Save* 按钮时，我们就更新这个实体对象；如果按了 *Cancel* 按钮，那就放弃这些更改。
|
||||
|
||||
Both buttons navigate back to the crisis list after save or cancel.
|
||||
|
||||
|
|
@ -4939,7 +4939,7 @@ authentication tokens or session ids.
|
|||
The `query params` and `fragment` can also be preserved using a `RouterLink` with
|
||||
the `queryParamsHandling` and `preserveFragment` bindings respectively.
|
||||
|
||||
“查询参数”和“片段”也可以分别用 `RouterLink` 中的**preserveQueryParams**和**preserveFragment**保存。
|
||||
“查询参数”和“片段”也可以分别用 `RouterLink` 中的 **preserveQueryParams** 和 **preserveFragment** 保存。
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -5038,7 +5038,7 @@ the module and routes are available immediately for subsequent requests.
|
|||
Angular provides a built-in module loader that supports SystemJS to load modules asynchronously. If you were
|
||||
using another bundling tool, such as Webpack, you would use the Webpack mechanism for asynchronously loading modules.
|
||||
|
||||
Angular 提供一个内置模块加载器，支持**`SystemJS`**来异步加载模块。如果我们使用其它捆绑工具比如**Webpack**，则使用 Webpack 的机制来异步加载模块。
|
||||
Angular 提供一个内置模块加载器，支持**`SystemJS`**来异步加载模块。如果我们使用其它捆绑工具比如 **Webpack**，则使用 Webpack 的机制来异步加载模块。
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -5681,7 +5681,7 @@ any legal sequence of route paths, (required) router parameters, and (optional)
|
|||
|
||||
### Appendix: *LocationStrategy* and browser URL styles
|
||||
|
||||
### 附录：*LocationStrategy*以及浏览器 URL 样式
|
||||
### 附录：*LocationStrategy* 以及浏览器 URL 样式
|
||||
|
||||
When the router navigates to a new component view, it updates the browser's location and history
|
||||
with a URL for that view.
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@ Here's the complete solution:
|
|||
|
||||
## Why provide the `Title` service in `bootstrap`
|
||||
|
||||
## 为什么要在*bootstrap*里面提供这个*Title*服务
|
||||
## 为什么要在 *bootstrap* 里面提供这个 *Title* 服务
|
||||
|
||||
Generally you want to provide application-wide services in the root application component, `AppComponent`.
|
||||
|
||||
|
|
|
|||
|
|
@ -1025,7 +1025,7 @@ For example, the prefix `toh` represents from **T**our **o**f **H**eroes and the
|
|||
|
||||
**Do** use a custom prefix for the selector of directives (e.g, the prefix `toh` from **T**our **o**f **H**eroes).
|
||||
|
||||
**坚持**为指令的选择器添加自定义前缀（例如前缀 `toh` 来自**T**our **o**f **H**eroes）。
|
||||
**坚持**为指令的选择器添加自定义前缀（例如前缀 `toh` 来自 **T**our **o**f **H**eroes）。
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -429,7 +429,7 @@ The *statement context* is typically the component instance.
|
|||
The *deleteHero* in `(click)="deleteHero()"` is a method of the data-bound component.
|
||||
|
||||
典型的*语句上下文*就是当前组件的实例。
|
||||
`(click)="deleteHero()"` 中的*deleteHero*就是这个数据绑定组件上的一个方法。
|
||||
`(click)="deleteHero()"` 中的 *deleteHero* 就是这个数据绑定组件上的一个方法。
|
||||
|
||||
<code-example path="template-syntax/src/app/app.component.html" region="context-component-statement" title="src/app/app.component.html" linenums="false">
|
||||
|
||||
|
|
@ -813,7 +813,7 @@ so the button is disabled.
|
|||
Adding and removing the `disabled` *attribute* disables and enables the button. The value of the *attribute* is irrelevant,
|
||||
which is why you cannot enable a button by writing `<button disabled="false">Still Disabled</button>`.
|
||||
|
||||
添加或删除 `disabled` 这个 *attribute*会禁用或启用这个按钮。但 *attribute* 的值无关紧要，这就是我们为什么没法通过
|
||||
添加或删除 `disabled` 这个 *attribute* 会禁用或启用这个按钮。但 *attribute* 的值无关紧要，这就是我们为什么没法通过
|
||||
`<button disabled="false">仍被禁用</button>` 这种写法来启用按钮。
|
||||
|
||||
Setting the button's `disabled` *property* (say, with an Angular binding) disables or enables the button.
|
||||
|
|
@ -2779,7 +2779,7 @@ The `NgForm` directive does that.
|
|||
|
||||
大多数情况下，Angular 会把模板引用变量的值设置为声明它的那个元素。
|
||||
在上一个例子中，`phone` 引用的是表示*电话号码*的 `<input>` 框。
|
||||
"拨号"按钮的点击事件处理器把这个*input*值传给了组件的 `callPhone` 方法。
|
||||
"拨号"按钮的点击事件处理器把这个 *input* 值传给了组件的 `callPhone` 方法。
|
||||
不过，指令也可以修改这种行为，让这个值引用到别处，比如它自身。
|
||||
`NgForm` 指令就是这么做的。
|
||||
|
||||
|
|
|
|||
|
|
@ -4730,7 +4730,7 @@ Here are the most important properties for testers, in order of likely utility.
|
|||
The _fixture_ methods cause Angular to perform certain tasks on the component tree.
|
||||
Call these method to trigger Angular behavior in response to simulated user action.
|
||||
|
||||
**fixture**方法使 Angular 对组件树执行某些任务。
|
||||
**fixture** 方法使 Angular 对组件树执行某些任务。
|
||||
在触发 Angular 行为来模拟的用户行为时，调用这些方法。
|
||||
|
||||
Here are the most useful methods for testers.
|
||||
|
|
@ -4810,7 +4810,7 @@ Here are the most useful methods for testers.
|
|||
When your test code modifies component property values directly,
|
||||
you probably still have to call `fixture.detectChanges` to trigger data binding updates.
|
||||
|
||||
当自动检测打开时，测试 fixture 监听**zone**事件，并调用 `detectChanges`。
|
||||
当自动检测打开时，测试 fixture 监听 **zone** 事件，并调用 `detectChanges`。
|
||||
当你的测试代码直接修改了组件属性值时，你还是要调用 `fixture.detectChanges` 来触发数据绑定更新。
|
||||
|
||||
The default is `false`. Testers who prefer fine control over test behavior
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ TypeScript 是 Angular 应用开发中使用的主语言。
|
|||
Browsers can't execute TypeScript directly. Typescript must be "transpiled" into JavaScript using the *tsc* compiler,
|
||||
which requires some configuration.
|
||||
|
||||
浏览器不能直接执行 TypeScript。它得先用*tsc*编译器转译(transpile)成 JavaScript，而且编译器需要进行一些配置。
|
||||
浏览器不能直接执行 TypeScript。它得先用 *tsc* 编译器转译(transpile)成 JavaScript，而且编译器需要进行一些配置。
|
||||
|
||||
This page covers some aspects of TypeScript configuration and the TypeScript environment
|
||||
that are important to Angular developers, including details about the following files:
|
||||
|
|
@ -61,7 +61,7 @@ This file contains options and flags that are essential for Angular applications
|
|||
|
||||
### *noImplicitAny* and *suppressImplicitAnyIndexErrors*
|
||||
|
||||
### *noImplicitAny*与*suppressImplicitAnyIndexErrors*
|
||||
### *noImplicitAny* 与 *suppressImplicitAnyIndexErrors*
|
||||
|
||||
TypeScript developers disagree about whether the `noImplicitAny` flag should be `true` or `false`.
|
||||
There is no correct answer and you can change the flag later.
|
||||
|
|
@ -208,7 +208,7 @@ QuickStart identifies two *typings*, or `d.ts`, files:
|
|||
* [node](https://www.npmjs.com/package/@types/node) for code that references objects in the *nodejs* environment;
|
||||
you can view an example in the [webpack](guide/webpack) page.
|
||||
|
||||
[node](https://www.npmjs.com/package/@types/node)是为了在*nodejs*环境中引用对象的代码提供的类型定义。在[webpack](guide/webpack)页面可以看到例子。
|
||||
[node](https://www.npmjs.com/package/@types/node)是为了在 *nodejs* 环境中引用对象的代码提供的类型定义。在[webpack](guide/webpack)页面可以看到例子。
|
||||
|
||||
QuickStart doesn't require these typings but many of the samples do.
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
_Angular_ is the name for the Angular of today and tomorrow.
|
||||
_AngularJS_ is the name for all v1.x versions of Angular.
|
||||
|
||||
*Angular*这个名字专指现在和未来的 Angular 版本，而*AngularJS*专指 Angular 的所有 v1.x 版本。
|
||||
*Angular* 这个名字专指现在和未来的 Angular 版本，而 *AngularJS* 专指 Angular 的所有 v1.x 版本。
|
||||
|
||||
AngularJS apps are great.
|
||||
Always consider the business case before moving to Angular.
|
||||
|
|
@ -622,7 +622,7 @@ scope (or controller) when they change.
|
|||
|
||||
### Using UpgradeModule with Angular _NgModules_
|
||||
|
||||
### 通过 Angular 的*NgModule*来使用 UpgradeModule
|
||||
### 通过 Angular 的 *NgModule* 来使用 UpgradeModule
|
||||
|
||||
Both AngularJS and Angular have their own concept of modules
|
||||
to help organize an application into cohesive blocks of functionality.
|
||||
|
|
@ -2035,7 +2035,7 @@ and add a mapping for the `@angular/upgrade/static` package.
|
|||
|
||||
### Creating the _AppModule_
|
||||
|
||||
### 创建*AppModule*
|
||||
### 创建 *AppModule*
|
||||
|
||||
Now create the root `NgModule` class called `AppModule`.
|
||||
There is already a file named `app.module.ts` that holds the AngularJS module.
|
||||
|
|
@ -2114,7 +2114,7 @@ exciting! You're not running any actual Angular components yet. That's next.
|
|||
|
||||
#### Why declare _angular_ as _angular.IAngularStatic_?
|
||||
|
||||
#### 为何要声明*angular*为*angular.IAngularStatic*？
|
||||
#### 为何要声明 *angular* 为*angular.IAngularStatic*？
|
||||
|
||||
`@types/angular` is declared as a UMD module, and due to the way
|
||||
<a href="https://github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript#support-for-umd-module-definitions">UMD typings</a>
|
||||
|
|
@ -2515,7 +2515,7 @@ You should now also remove the phone detail component <script> tag from `i
|
|||
|
||||
#### Add the _CheckmarkPipe_
|
||||
|
||||
#### 添加*CheckmarkPipe*
|
||||
#### 添加 *CheckmarkPipe*
|
||||
|
||||
The AngularJS directive had a `checkmark` _filter_.
|
||||
Turn that into an Angular **pipe**.
|
||||
|
|
@ -3045,7 +3045,7 @@ an AngularJS app anymore, but instead it should find *Angular apps* from
|
|||
the page.
|
||||
|
||||
当引导方式从 `UpgradeModule` 切换到纯 Angular 的时，AngularJS 就从页面中完全消失了。
|
||||
此时，我们需要告诉 Protractor，它不用再找 AngularJS 应用了，而是从页面中查找*Angular*应用。
|
||||
此时，我们需要告诉 Protractor，它不用再找 AngularJS 应用了，而是从页面中查找 *Angular* 应用。
|
||||
于是在 `protractor-conf.js` 中做下列修改：
|
||||
|
||||
Replace the `ng12Hybrid` previously added with the following in `protractor-conf.js`:
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@ Configure Visual Studio to use the global external web tools instead of the tool
|
|||
|
||||
* Open the **Options** dialog with `Tools` | `Options`.
|
||||
|
||||
到 `Tools` | `Options` 打开**Options**对话框
|
||||
到 `Tools` | `Options` 打开 **Options** 对话框
|
||||
|
||||
* In the tree on the left, select `Projects and Solutions` | `External Web Tools`.
|
||||
|
||||
|
|
@ -210,7 +210,7 @@ Include the files in the Visual Studio project as follows:
|
|||
|
||||
* src/app folder (answer *No* if asked to search for TypeScript Typings)
|
||||
|
||||
src/app 目录（如果询问是否要搜索 TypeScript 类型，回答*No*）
|
||||
src/app 目录（如果询问是否要搜索 TypeScript 类型，回答 *No*）
|
||||
|
||||
* src/styles.css
|
||||
|
||||
|
|
@ -382,7 +382,7 @@ match the base href in `index.html`.
|
|||
|
||||
Build and launch the app with debugger by clicking the **Run** button or by pressing `F5`.
|
||||
|
||||
点击**Run**按钮或者按 `F5` 键，用调试器构建和启动应用。
|
||||
点击 **Run** 按钮或者按 `F5` 键，用调试器构建和启动应用。
|
||||
|
||||
<div class="l-sub-section">
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ and for loading that code from a server into a browser.
|
|||
It's an excellent alternative to the *SystemJS* approach used elsewhere in the documentation.
|
||||
This guide offers a taste of Webpack and explains how to use it with Angular applications.
|
||||
|
||||
它是我们在文档中到处使用的*SystemJS*的一个优秀替代品。这篇指南会带我们尝尝 Webpack 的滋味，并解释如何在 Angular 程序中使用它。
|
||||
它是我们在文档中到处使用的 *SystemJS* 的一个优秀替代品。这篇指南会带我们尝尝 Webpack 的滋味，并解释如何在 Angular 程序中使用它。
|
||||
|
||||
{@a top}
|
||||
|
||||
|
|
@ -393,7 +393,7 @@ Webpack，包括它的插件以及加载器，也是以 npm 包的形式安装
|
|||
|
||||
Open a terminal window and install the npm packages.
|
||||
|
||||
打开命令行窗口并安装这些*npm*包
|
||||
打开命令行窗口并安装这些 *npm* 包
|
||||
|
||||
<code-example language="sh" class="code-shell">
|
||||
|
||||
|
|
@ -467,7 +467,7 @@ Gather the common configuration in a file called `webpack.common.js`.
|
|||
|
||||
Webpack is a NodeJS-based tool that reads configuration from a JavaScript commonjs module file.
|
||||
|
||||
Webpack 是基于 NodeJS 的一个工具，它能够从一个*commonjs*规范的 JavaScript 模块文件里读取配置。
|
||||
Webpack 是基于 NodeJS 的一个工具，它能够从一个 *commonjs* 规范的 JavaScript 模块文件里读取配置。
|
||||
|
||||
The configuration imports dependencies with `require` statements
|
||||
and exports several objects as properties of a `module.exports` object.
|
||||
|
|
@ -498,7 +498,7 @@ and exports several objects as properties of a `module.exports` object.
|
|||
|
||||
The first export is the `entry` object:
|
||||
|
||||
如上所述，第一个导出的对象是*entries*：
|
||||
如上所述，第一个导出的对象是 *entries*：
|
||||
|
||||
<code-example path="webpack/config/webpack.common.js" region="entries" title="config/webpack.common.js" linenums="false">
|
||||
|
||||
|
|
@ -800,7 +800,7 @@ There are additional plugins:
|
|||
|
||||
Thanks to the `DefinePlugin` and the `ENV` variable defined at top, you can enable Angular production mode like this:
|
||||
|
||||
感谢*DefinePlugin*和顶部定义的 `ENV` 变量，我们就可以像这样启用 Angular 的产品模式了：
|
||||
感谢 *DefinePlugin* 和顶部定义的 `ENV` 变量，我们就可以像这样启用 Angular 的产品模式了：
|
||||
|
||||
<code-example path="webpack/src/main.ts" region="enable-prod" title="src/main.ts" linenums="false">
|
||||
|
||||
|
|
|
|||
|
|
@ -10,6 +10,8 @@ export function addSpaces(sourceDir: string): void {
|
|||
const result = content
|
||||
.replace(/([\u4e00-\u9fa5])([a-zA-Z0-9`])/g, '$1 $2')
|
||||
.replace(/([a-zA-Z0-9`])([\u4e00-\u9fa5])/g, '$1 $2')
|
||||
.replace(/([*-]+)(\w+)([*-]+)([\u4e00-\u9fa5])/g, '$1$2$3 $4')
|
||||
.replace(/([\u4e00-\u9fa5])([*-]+)(\w+)([*-]+)/g, '$1 $2$3$4')
|
||||
;
|
||||
fs.writeFileSync(fileName, result, 'utf8');
|
||||
console.log('added spaces ', fileName);
|
||||
|
|
|
|||
Loading…
Reference in New Issue