修正所有合并时出现在中间位置的+makeExample等函数
This commit is contained in:
parent
26ba602922
commit
3b9708283a
|
@ -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`,
|
||||||
|
|
|
@ -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.
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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:
|
||||||
|
|
Loading…
Reference in New Issue