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

docs(template-syntax): remove notes for Ward (#3247)

This commit is contained in:
Ward Bell 2017-02-13 15:09:11 -08:00 committed by Jesús Rodríguez
parent 87674d966d
commit 6924bce384
1 changed files with 16 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -146,28 +146,25 @@ block notable-differences
* new [template expression operators](#expression-operators), such as `|` and `?.`
h3#expression-context Expression context
.alert.is-critical
:marked
Ward: you wanted to have a note here per our slack conversation where you said,
"The context for terms in an expression is a blend of the data-bound component
and the directive's context (if it has one). The latter wins when the term is a property of both."
:marked
The *expression context* is typically the component instance.
In the following examples, the *title* within double-curly braces, `{{title}}` is a property of the data-bound component.
In `[hidden]="isUnchanged"`,
_isUnchanged_ refers to the component's `isUnchanged` property.
The *expression context* is typically the _component_ instance.
In the following snippets, the `title` within double-curly braces and the
`isUnchanged` in quotes refer to properties of the `AppComponent`.
+makeExample('template-syntax/ts/src/app/app.component.html', 'context-component-expression')(format=".")
:marked
The expression may also refer to properties of the template's own context
An expression may also refer to properties of the _template's_ context
such as a [template input variable](#template-input-variable) (`let hero`)
or a [template reference variable](#ref-vars) (`#heroInput`).
+makeExample('template-syntax/ts/src/app/app.component.html', 'context-var')(format=".")
:marked
Template context property names take precedence over component context names.
In `{{hero}}` above, the `hero` is the template input variable, not the component's `hero` property.
The context for terms in an expression is a blend of the _template variables_,
the directive's _context_ object (if it has one), and the component's _members_.
If you reference a name that belongs to more than one of these namespaces,
the tempate variable name takes precedence, followed by a name in the directive's' _context_,
and, lastly, the component's member names.
The previous example presents such a name collision. The component has a `hero` property and the `*ngFor` defines a `hero` template variable. The `hero` in `{{hero}}` refers to the template input variable, not the component's property.
block template-expressions-cannot
:marked
@ -1480,22 +1477,14 @@ a#inputs-outputs
You have *limited* access to members of a **target** directive.
You can only bind to properties that are explicitly identified as *inputs* and *outputs*.
:marked
In the following example, `iconUrl` and `onSave` are members of a component
that are referenced within quoted syntax to the right of the `=`.
In the following snippet, `iconUrl` and `onSave` are data-bound members of the `AppComponent`
and are referenced within quoted syntax to the _right_ of the equals (`=`).
+makeExample('template-syntax/ts/src/app/app.component.html', 'io-1')(format=".")
:marked
They are *neither inputs nor outputs* of the component. They are data sources for their bindings.
They are *neither inputs nor outputs* of the component. They are **sources** for their bindings.
The targets are the native `<img>` and `<button>` elements.
.alert.is-critical
:marked
Ward: I was momentarily uncertain below because the instructions say to look
at `HeroDetailComponent` but it doesn't occur explicitly in the code sample.
In the following paragraph I then see `HeroDetailComponent.hero` and think,
"hm, ok, I guess that means we're inside `HeroDetailComponent`", but my
assumption feels wobbly.
:marked
Now look at `HeroDetailComponent` when it is the **target of a binding**.
Now look at a another snippet in which the `HeroDetailComponent` is the **target** of a binding on the _left_ of the equals&nbsp;(`=`).
+makeExample('template-syntax/ts/src/app/app.component.html', 'io-2')(format=".")
:marked
Both `HeroDetailComponent.hero` and `HeroDetailComponent.deleteRequest` are on the **left side** of binding declarations.