iSharkFly-Docs/angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Interpolation Copy Edit

Browse Source
This commit is contained in:
amandaegraham 2016-07-18 23:19:27 -04:00 committed by Naomi Black
parent e8642d4616
commit 7e1dba64eb
1 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
public/docs/ts/latest/guide/template-syntax.jade
View File

@ -66,8 +66,8 @@ code-example(language="html" escape="html").
+makeExample('template-syntax/ts/app/app.component.html', 'title+image')(format=".") +makeExample('template-syntax/ts/app/app.component.html', 'title+image')(format=".")
:marked :marked
The material between the braces is often the name of a component property. Angular replaces that name with the The material between the braces is often the name of a component property. Angular replaces that name with the
string value of the corresponding component property. In this example, Angular evaluates the `title` and `heroImageUrl` properties string value of the corresponding component property. In the example above, Angular evaluates the `title` and `heroImageUrl` properties
and "fills in the blanks", displaying first a bold application title and then a heroic image. and "fills in the blanks", first displaying a bold application title and then a heroic image.
More generally, the material between the braces is a **template expression** that Angular first **evaluates** More generally, the material between the braces is a **template expression** that Angular first **evaluates**
and then **converts to a string**. The following interpolation illustrates the point by adding the two numbers within braces: and then **converts to a string**. The following interpolation illustrates the point by adding the two numbers within braces:
@ -76,13 +76,13 @@ code-example(language="html" escape="html").
The expression can invoke methods of the host component, as we do here with `getVal()`: The expression can invoke methods of the host component, as we do here with `getVal()`:
+makeExample('template-syntax/ts/app/app.component.html', 'sum-2')(format=".") +makeExample('template-syntax/ts/app/app.component.html', 'sum-2')(format=".")
:marked :marked
Angular evaluates all expressions in double curly braces, converts the expression results to strings, and concatenates them with neighboring literal strings. Finally, Angular evaluates all expressions in double curly braces, converts the expression results to strings, and links them with neighboring literal strings. Finally,
it assigns this composite interpolated result to an **element or directive property**. it assigns this composite interpolated result to an **element or directive property**.
We appear to be inserting the result between element tags and assigning to attributes. We appear to be inserting the result between element tags and assigning it to attributes.
It's convenient to think so, and we rarely suffer for this mistake. It's convenient to think so, and we rarely suffer for this mistake.
But it is not literally true. Interpolation is a special syntax that Angular converts into a Though this is not exactly true. Interpolation is a special syntax that Angular converts into a
[property binding](#property-binding), as we'll explain below. [property binding](#property-binding), and is explained below.
But first, let's take a closer look at template expressions and statements. But first, let's take a closer look at template expressions and statements.