feat(core): separate refs from vars.

Introduces `ref-` to give a name to an element or a directive (also works for `<template>` elements), and `let-` to introduce an input variable for a `<template>` element.

BREAKING CHANGE:
- `#...` now always means `ref-`.
- `<template #abc>` now defines a reference to the TemplateRef, instead of an input variable used inside of the template.
- `#...` inside of a *ngIf, … directives is deprecated.
  Use `let …` instead.
- `var-...` is deprecated. Replace with `let-...` for `<template>` elements and `ref-` for non `<template>` elements.

Closes #7158

Closes #8264
This commit is contained in:
Tobias Bosch
2016-04-25 19:52:24 -07:00
parent ff2ae7a2e1
commit d2efac18ed
69 changed files with 651 additions and 414 deletions

View File

@ -448,7 +448,7 @@ export function main() {
inject([TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async) => {
var t = `<select>
<option *ngFor="#city of list" [value]="city['id']">
<option *ngFor="let city of list" [value]="city['id']">
{{ city['name'] }}
</option>
</select>`;
@ -503,7 +503,7 @@ export function main() {
fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
var t = `<div [ngFormModel]="form">
<select ngControl="city">
<option *ngFor="#c of data" [value]="c"></option>
<option *ngFor="let c of data" [value]="c"></option>
</select>
</div>`;
@ -528,7 +528,7 @@ export function main() {
(tcb: TestComponentBuilder, async) => {
var t = `<div>
<select [(ngModel)]="selectedCity">
<option *ngFor="#c of list" [ngValue]="c">{{c['name']}}</option>
<option *ngFor="let c of list" [ngValue]="c">{{c['name']}}</option>
</select>
</div>`;
@ -560,7 +560,7 @@ export function main() {
(tcb: TestComponentBuilder, async) => {
var t = `<div>
<select [(ngModel)]="selectedCity">
<option *ngFor="#c of list" [ngValue]="c">{{c['name']}}</option>
<option *ngFor="let c of list" [ngValue]="c">{{c['name']}}</option>
</select>
</div>`;
@ -588,7 +588,7 @@ export function main() {
(tcb: TestComponentBuilder, async) => {
var t = `<div>
<select [(ngModel)]="selectedCity">
<option *ngFor="#c of list" [ngValue]="c">{{c}}</option>
<option *ngFor="let c of list" [ngValue]="c">{{c}}</option>
</select>
</div>`;
tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
@ -614,7 +614,7 @@ export function main() {
(tcb: TestComponentBuilder, async) => {
var t = `<div>
<select [(ngModel)]="selectedCity">
<option *ngFor="#c of list; trackBy:customTrackBy" [ngValue]="c">{{c}}</option>
<option *ngFor="let c of list; trackBy:customTrackBy" [ngValue]="c">{{c}}</option>
</select>
</div>`;
@ -644,7 +644,7 @@ export function main() {
(tcb: TestComponentBuilder, async) => {
var t = `<div>
<select [(ngModel)]="selectedCity">
<option *ngFor="#c of list" [ngValue]="c">{{c}}</option>
<option *ngFor="let c of list" [ngValue]="c">{{c}}</option>
</select>
</div>`;
@ -673,7 +673,7 @@ export function main() {
(tcb: TestComponentBuilder, async) => {
var t = `<div>
<select [(ngModel)]="selectedCity">
<option *ngFor="#c of list" [ngValue]="c">{{c['name']}}</option>
<option *ngFor="let c of list" [ngValue]="c">{{c['name']}}</option>
</select>
</div>`;