修正所有合并时出现在中间位置的+makeExample等函数

This commit is contained in:
Zhicheng Wang 2017-04-15 16:02:59 +08:00
parent 26ba602922
commit 3b9708283a
5 changed files with 26 additions and 9 deletions

View File

@ -482,15 +482,22 @@ a#input-alias
It may be difficult to imagine how this directive actually works. It may be difficult to imagine how this directive actually works.
In this section, you'll turn `AppComponent` into a harness that In this section, you'll turn `AppComponent` into a harness that
lets you pick the highlight color with a radio button and bind your color choice to the directive. lets you pick the highlight color with a radio button and bind your color choice to the directive.
凭空想象该指令如何工作可不容易。 凭空想象该指令如何工作可不容易。
在本节,我们将把`AppComponent`改成一个测试程序,它让你可以通过单选按钮来选取高亮颜色,并且把你选取的颜色绑定到指令中。 在本节,我们将把`AppComponent`改成一个测试程序,它让你可以通过单选按钮来选取高亮颜色,并且把你选取的颜色绑定到指令中。
Update <code>app.component.html</code> as follows:把`app.component.html`修改成这样:
Update <code>app.component.html</code> as follows
:把`app.component.html`修改成这样:
+makeExcerpt('src/app/app.component.html', 'v2', '') +makeExcerpt('src/app/app.component.html', 'v2', '')
:marked :marked
Revise the `AppComponent.color` so that it has no initial value. Revise the `AppComponent.color` so that it has no initial value.
修改`AppComponent.color`,让它不再有初始值。+makeExcerpt('src/app/app.component.ts', 'class', '')
修改`AppComponent.color`,让它不再有初始值。
+makeExcerpt('src/app/app.component.ts', 'class', '')
:marked :marked
Here are the harness and directive in action.下面是测试程序和指令的动图。 Here are the harness and directive in action.下面是测试程序和指令的动图。
@ -515,7 +522,9 @@ figure.image-display
Add a second **input** property to `HighlightDirective` called `defaultColor`: Add a second **input** property to `HighlightDirective` called `defaultColor`:
把第二个名叫`defaultColor`的**输入**属性添加到`HighlightDirective`中:+makeExcerpt('src/app/highlight.directive.ts(defaultColor)') 把第二个名叫`defaultColor`的**输入**属性添加到`HighlightDirective`中:
+makeExcerpt('src/app/highlight.directive.ts(defaultColor)')
:marked :marked
Revise the directive's `onMouseEnter` so that it first tries to highlight with the `highlightColor`, Revise the directive's `onMouseEnter` so that it first tries to highlight with the `highlightColor`,

View File

@ -178,7 +178,9 @@ figure.image-display
Although this example uses variable assignment to initialize the components, you can instead declare and initialize the properties using a constructor: Although this example uses variable assignment to initialize the components, you can instead declare and initialize the properties using a constructor:
虽然这个例子使用了变量赋值的方式初始化组件,你还可以使用构造函数来声明和初始化属性。+makeExcerpt('src/app/app-ctor.component.ts', 'class') 虽然这个例子使用了变量赋值的方式初始化组件,你还可以使用构造函数来声明和初始化属性。
+makeExcerpt('src/app/app-ctor.component.ts', 'class')
:marked :marked
This app uses more terse "variable assignment" style simply for brevity. This app uses more terse "variable assignment" style simply for brevity.

View File

@ -296,14 +296,18 @@ h2#bypass-security-apis 信任安全值
your intended use of the value. Imagine that the following template needs to bind a URL to a your intended use of the value. Imagine that the following template needs to bind a URL to a
`javascript:alert(...)` call: `javascript:alert(...)` call:
记住,一个值是否安全取决于它所在的环境,所以你要为这个值按预定的用法选择正确的环境。假设下面的模板需要把`javascript.alert(...)`方法绑定到URL。+makeExcerpt('src/app/bypass-security.component.html', 'URL') 记住,一个值是否安全取决于它所在的环境,所以你要为这个值按预定的用法选择正确的环境。假设下面的模板需要把`javascript.alert(...)`方法绑定到URL。
+makeExcerpt('src/app/bypass-security.component.html', 'URL')
:marked :marked
Normally, Angular automatically sanitizes the URL, disables the dangerous code, and Normally, Angular automatically sanitizes the URL, disables the dangerous code, and
in development mode, logs this action to the console. To prevent in development mode, logs this action to the console. To prevent
this, mark the URL value as a trusted URL using the `bypassSecurityTrustUrl` call: this, mark the URL value as a trusted URL using the `bypassSecurityTrustUrl` call:
通常Angular会自动无害化这个URL并禁止危险的代码。为了防止这种行为我们可以调用`bypassSecurityTrustUrl`把这个URL值标记为一个可信任的URL+makeExcerpt('src/app/bypass-security.component.ts ()', 'trust-url') 通常Angular会自动无害化这个URL并禁止危险的代码。为了防止这种行为我们可以调用`bypassSecurityTrustUrl`把这个URL值标记为一个可信任的URL
+makeExcerpt('src/app/bypass-security.component.ts ()', 'trust-url')
figure.image-display figure.image-display
img(src='/resources/images/devguide/security/bypass-security-component.png' img(src='/resources/images/devguide/security/bypass-security-component.png'

View File

@ -114,7 +114,7 @@ include ../_util-fns
3. [Bootstrapping a hybrid PhoneCat](#bootstrapping-a-hybrid-phonecat) 3. [Bootstrapping a hybrid PhoneCat](#bootstrapping-a-hybrid-phonecat)
[引导AngularJS+2的混合版PhoneCat](#bootstrapping-a-hybrid-phonecat) [引导混合版PhoneCat](#bootstrapping-a-hybrid-phonecat)
4. [Upgrading the Phone service](#upgrading-the-phone-service) 4. [Upgrading the Phone service](#upgrading-the-phone-service)
@ -1849,7 +1849,7 @@ code-example(format="").
an `UpgradeModule`, we're actually now running the app as a **hybrid app**. an `UpgradeModule`, we're actually now running the app as a **hybrid app**.
这里使用的参数是应用的根元素(也就是以前我们放`ng-app`的元素)和我们准备加载的AngularJS.x模块。 这里使用的参数是应用的根元素(也就是以前我们放`ng-app`的元素)和我们准备加载的AngularJS.x模块。
由于我们是通过`UpgradeAdapter`引导应用的,所以实际在运行的应用实际上是一个AngularJS+2的混合体。 由于我们是通过`UpgradeAdapter`引导应用的,所以实际在运行的应用实际上是一个混合体。
This means we are now running both AngularJS and Angular at the same time. That's pretty This means we are now running both AngularJS and Angular at the same time. That's pretty
exciting! We're not running any actual Angular components yet though, exciting! We're not running any actual Angular components yet though,

View File

@ -1345,7 +1345,9 @@ figure.image-display
All you have to do is define the style for it. All you have to do is define the style for it.
Angular路由器提供了`routerLinkActive`指令,我们可以用它来为匹配了活动路由的 HTML 导航元素自动添加一个 CSS 类。 Angular路由器提供了`routerLinkActive`指令,我们可以用它来为匹配了活动路由的 HTML 导航元素自动添加一个 CSS 类。
我们唯一要做的就是为它定义样式。真好!+makeExample('toh-5/ts/src/app/app.component.ts', 'template','src/app/app.component.ts (active router links)') 我们唯一要做的就是为它定义样式。真好!
+makeExample('toh-5/ts/src/app/app.component.ts', 'template','src/app/app.component.ts (active router links)')
:marked :marked
Add a `styleUrls` property that refers to this CSS file as follows: Add a `styleUrls` property that refers to this CSS file as follows: