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

fix(ivy): provide an ability to match <ng-template> tags (#27636) 

Prior to this change, we were unable to match directives using `ng-template` tags (for example the following selector would not work even though there might be some <ng-template>s in a template: `ng-template[directiveA]`. As a result, that broke some components that relies on such selectors to work. In order to resolve the problem, we now pass tag name to the `template` instruction (where we passed `null` before) and this tag name is used for matching at runtime. This update should also help support projecting containers, because the tag name is required to properly match such elements.

PR Close #27636
This commit is contained in:
Andrew Kushnir 2018-12-12 15:23:12 -08:00 committed by Miško Hevery
parent ea10a3abe5
commit dfbf6d72b0
29 changed files with 488 additions and 205 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
packages/compiler-cli/test/compliance/r3_compiler_compliance_spec.ts
View File

@ -11,7 +11,8 @@ import {setup} from '@angular/compiler/test/aot/test_util';
import {compile, expectEmit} from './mock_compile'; import {compile, expectEmit} from './mock_compile';
/* These tests are codified version of the tests in compiler_canonical_spec.ts. Every /**
* These tests are codified version of the tests in compiler_canonical_spec.ts. Every
* test in compiler_canonical_spec.ts should have a corresponding test here. * test in compiler_canonical_spec.ts should have a corresponding test here.
*/ */
describe('compiler compliance', () => { describe('compiler compliance', () => {
@ -794,7 +795,7 @@ describe('compiler compliance', () => {
template: function MyComponent_Template(rf, ctx) { template: function MyComponent_Template(rf, ctx) {
if (rf & 1) { if (rf & 1) {
$r3$.ɵelementStart(0, "ul", null, $c1$); $r3$.ɵelementStart(0, "ul", null, $c1$);
$r3$.ɵtemplate(2, MyComponent_li_Template_2, 2, 2, null, $c2$); $r3$.ɵtemplate(2, MyComponent_li_Template_2, 2, 2, "li", $c2$);
$r3$.ɵelementEnd(); $r3$.ɵelementEnd();
} }
}, },
@ -1218,7 +1219,7 @@ describe('compiler compliance', () => {
$r3$.ɵelementEnd(); $r3$.ɵelementEnd();
} }
} }
function Template_2(rf, ctx) { function Cmp_ng_template_Template_2(rf, ctx) {
if (rf & 1) { if (rf & 1) {
$r3$.ɵprojectionDef(); $r3$.ɵprojectionDef();
$r3$.ɵtext(0, " '*' selector: "); $r3$.ɵtext(0, " '*' selector: ");
@ -1228,9 +1229,9 @@ describe('compiler compliance', () => {
… …
template: function Cmp_Template(rf, ctx) { template: function Cmp_Template(rf, ctx) {
if (rf & 1) { if (rf & 1) {
$r3$.ɵtemplate(0, Cmp_div_Template_0, 2, 0, null, $_c0$); $r3$.ɵtemplate(0, Cmp_div_Template_0, 2, 0, "div", $_c0$);
$r3$.ɵtemplate(1, Cmp_div_Template_1, 2, 0, null, $_c0$); $r3$.ɵtemplate(1, Cmp_div_Template_1, 2, 0, "div", $_c0$);
$r3$.ɵtemplate(2, Template_2, 2, 0); $r3$.ɵtemplate(2, Cmp_ng_template_Template_2, 2, 0, "ng-template");
} }
if (rf & 2) { if (rf & 2) {
$r3$.ɵelementProperty(0, "ngIf", $r3$.ɵbind(ctx.visible)); $r3$.ɵelementProperty(0, "ngIf", $r3$.ɵbind(ctx.visible));
@ -1867,7 +1868,7 @@ describe('compiler compliance', () => {
if (rf & 1) { if (rf & 1) {
$r3$.ɵelementStart(0, "div"); $r3$.ɵelementStart(0, "div");
$r3$.ɵtext(1); $r3$.ɵtext(1);
$r3$.ɵtemplate(2, MyComponent_div_span_Template_2, 2, 3, null, $c2$); $r3$.ɵtemplate(2, MyComponent_div_span_Template_2, 2, 3, "span", $c2$);
$r3$.ɵelement(3, "span", null, $c4$); $r3$.ɵelement(3, "span", null, $c4$);
$r3$.ɵelementEnd(); $r3$.ɵelementEnd();
} }
@ -1889,7 +1890,7 @@ describe('compiler compliance', () => {
if (rf & 1) { if (rf & 1) {
$r3$.ɵelement(0, "div", null, $c1$); $r3$.ɵelement(0, "div", null, $c1$);
$r3$.ɵtext(2); $r3$.ɵtext(2);
$r3$.ɵtemplate(3, MyComponent_div_Template_3, 5, 2, null, $c2$); $r3$.ɵtemplate(3, MyComponent_div_Template_3, 5, 2, "div", $c2$);
$r3$.ɵelement(4, "div", null, $c3$); $r3$.ɵelement(4, "div", null, $c3$);
} }
if (rf & 2) { if (rf & 2) {
@ -1954,7 +1955,7 @@ describe('compiler compliance', () => {
if (rf & 1) { if (rf & 1) {
$i0$.ɵelementStart(0, "div"); $i0$.ɵelementStart(0, "div");
$i0$.ɵelement(1, "div", null, $c1$); $i0$.ɵelement(1, "div", null, $c1$);
$i0$.ɵtemplate(3, MyComponent_div_span_Template_3, 2, 2, null, $c2$); $i0$.ɵtemplate(3, MyComponent_div_span_Template_3, 2, 2, "span", $c2$);
$i0$.ɵelementEnd(); $i0$.ɵelementEnd();
} }
if (rf & 2) { if (rf & 2) {
@ -1966,7 +1967,7 @@ describe('compiler compliance', () => {
// ... // ...
template:function MyComponent_Template(rf, ctx){ template:function MyComponent_Template(rf, ctx){
if (rf & 1) { if (rf & 1) {
$i0$.ɵtemplate(0, MyComponent_div_Template_0, 4, 1, null, $c0$); $i0$.ɵtemplate(0, MyComponent_div_Template_0, 4, 1, "div", $c0$);
} }
if (rf & 2) { if (rf & 2) {
$i0$.ɵelementProperty(0, "ngForOf", $i0$.ɵbind(ctx.items)); $i0$.ɵelementProperty(0, "ngForOf", $i0$.ɵbind(ctx.items));
@ -2119,6 +2120,9 @@ describe('compiler compliance', () => {
} }
}; };
// TODO(akushnir): tag name generated for <g> element inside <svg> is incorrect.
// It's generated as ":svg:g", when it should be just "g". Potentially related to
// the issue described in FW-672.
it('should support embedded views in the SVG namespace', () => { it('should support embedded views in the SVG namespace', () => {
const files = { const files = {
app: { app: {
@ -2177,7 +2181,7 @@ describe('compiler compliance', () => {
if (rf & 1) { if (rf & 1) {
$r3$.ɵnamespaceSVG(); $r3$.ɵnamespaceSVG();
$r3$.ɵelementStart(0,"svg"); $r3$.ɵelementStart(0,"svg");
$r3$.ɵtemplate(1, MyComponent__svg_g_Template_1, 2, 0, null, $t1_attrs$); $r3$.ɵtemplate(1, MyComponent__svg_g_Template_1, 2, 0, ":svg:g", $t1_attrs$);
$r3$.ɵelementEnd(); $r3$.ɵelementEnd();
} }
if (rf & 2) { $r3$.ɵelementProperty(1,"forOf",$r3$.ɵbind(ctx.items)); } if (rf & 2) { $r3$.ɵelementProperty(1,"forOf",$r3$.ɵbind(ctx.items)); }
@ -2255,7 +2259,7 @@ describe('compiler compliance', () => {
template: function MyComponent_Template(rf, ctx) { template: function MyComponent_Template(rf, ctx) {
if (rf & 1) { if (rf & 1) {
$r3$.ɵelementStart(0, "ul"); $r3$.ɵelementStart(0, "ul");
$r3$.ɵtemplate(1, MyComponent_li_Template_1, 2, 1, null, $t1_attrs$); $r3$.ɵtemplate(1, MyComponent_li_Template_1, 2, 1, "li", $t1_attrs$);
$r3$.ɵelementEnd(); $r3$.ɵelementEnd();
} }
if (rf & 2) { if (rf & 2) {
@ -2334,7 +2338,7 @@ describe('compiler compliance', () => {
$r3$.ɵtext(2); $r3$.ɵtext(2);
$r3$.ɵelementEnd(); $r3$.ɵelementEnd();
$r3$.ɵelementStart(3, "ul"); $r3$.ɵelementStart(3, "ul");
$r3$.ɵtemplate(4, MyComponent_li_li_Template_4, 2, 2, null, $t4_attrs$); $r3$.ɵtemplate(4, MyComponent_li_li_Template_4, 2, 2, "li", $t4_attrs$);
$r3$.ɵelementEnd(); $r3$.ɵelementEnd();
$r3$.ɵelementEnd(); $r3$.ɵelementEnd();
} }
@ -2355,7 +2359,7 @@ describe('compiler compliance', () => {
template: function MyComponent_Template(rf, ctx) { template: function MyComponent_Template(rf, ctx) {
if (rf & 1) { if (rf & 1) {
$r3$.ɵelementStart(0, "ul"); $r3$.ɵelementStart(0, "ul");
$r3$.ɵtemplate(1, MyComponent_li_Template_1, 5, 2, null, $c1$); $r3$.ɵtemplate(1, MyComponent_li_Template_1, 5, 2, "li", $c1$);
$r3$.ɵelementEnd(); $r3$.ɵelementEnd();
} }
if (rf & 2) { if (rf & 2) {

120
packages/compiler-cli/test/compliance/r3_view_compiler_directives_spec.ts
View File

@ -23,7 +23,7 @@ describe('compiler compliance: directives', () => {
const files = { const files = {
app: { app: {
'spec.ts': ` 'spec.ts': `
import {Component, Directive, Input, NgModule} from '@angular/core'; import {Component, Directive, NgModule} from '@angular/core';
@Directive({selector: '[i18n]'}) @Directive({selector: '[i18n]'})
export class I18nDirective {} export class I18nDirective {}
@ -63,7 +63,7 @@ describe('compiler compliance: directives', () => {
const files = { const files = {
app: { app: {
'spec.ts': ` 'spec.ts': `
import {Component, Directive, Input, NgModule} from '@angular/core'; import {Component, Directive, NgModule} from '@angular/core';
@Directive({selector: '[i18n]'}) @Directive({selector: '[i18n]'})
export class I18nDirective {} export class I18nDirective {}
@ -154,6 +154,118 @@ describe('compiler compliance: directives', () => {
expectEmit(source, MyComponentDefinition, 'Incorrect ChildComponent.ngComponentDef'); expectEmit(source, MyComponentDefinition, 'Incorrect ChildComponent.ngComponentDef');
}); });
it('should match directives on ng-templates', () => {
const files = {
app: {
'spec.ts': `
import {Component, Directive, NgModule, TemplateRef} from '@angular/core';
@Directive({
selector: 'ng-template[directiveA]'
})
export class DirectiveA {
constructor(public templateRef: TemplateRef<any>) {}
}
@Component({
selector: 'my-component',
template: \`
<ng-template directiveA>Some content</ng-template>
\`
})
export class MyComponent {}
@NgModule({declarations: [DirectiveA, MyComponent]})
export class MyModule{}
`
}
};
const MyComponentDefinition = `
…
const $_c0$ = ["directiveA", ""];
function MyComponent_ng_template_Template_0(rf, ctx) {
if (rf & 1) {
$r3$.ɵtext(0, "Some content");
}
}
…
MyComponent.ngComponentDef = $r3$.ɵdefineComponent({
…
template: function MyComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵtemplate(0, MyComponent_ng_template_Template_0, 1, 0, "ng-template", $_c0$);
}
},
…
directives: [DirectiveA],
…
});
`;
const result = compile(files, angularFiles);
expectEmit(result.source, MyComponentDefinition, 'Incorrect ChildComponent.ngComponentDef');
});
it('should match directives on ng-container', () => {
const files = {
app: {
'spec.ts': `
import {Component, Directive, NgModule, TemplateRef} from '@angular/core';
@Directive({
selector: 'ng-container[directiveA]'
})
export class DirectiveA {
constructor(public templateRef: TemplateRef<any>) {}
}
@Component({
selector: 'my-component',
template: \`
<ng-container *ngIf="showing" directiveA>Some content</ng-container>
\`
})
export class MyComponent {}
@NgModule({declarations: [DirectiveA, MyComponent]})
export class MyModule{}
`
}
};
const MyComponentDefinition = `
…
const $_c0$ = [1, "ngIf"];
const $_c1$ = ["directiveA", ""];
function MyComponent_ng_container_Template_0(rf, ctx) {
if (rf & 1) {
$r3$.ɵelementContainerStart(0, $_c1$);
$r3$.ɵtext(1, "Some content");
$r3$.ɵelementContainerEnd();
}
}
…
MyComponent.ngComponentDef = $r3$.ɵdefineComponent({
…
template: function MyComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵtemplate(0, MyComponent_ng_container_Template_0, 2, 0, "ng-container", $_c0$);
}
if (rf & 2) {
$r3$.ɵelementProperty(0, "ngIf", $r3$.ɵbind(ctx.showing));
}
},
…
directives: [DirectiveA],
…
});
`;
const result = compile(files, angularFiles);
expectEmit(result.source, MyComponentDefinition, 'Incorrect ChildComponent.ngComponentDef');
});
it('should match directives on ng-template bindings', () => { it('should match directives on ng-template bindings', () => {
const files = { const files = {
@ -185,7 +297,7 @@ describe('compiler compliance: directives', () => {
… …
template: function MyComponent_Template(rf, ctx) { template: function MyComponent_Template(rf, ctx) {
if (rf & 1) { if (rf & 1) {
$r3$.ɵtemplate(0, Template_0, 0, 0, null, $c0_a0$); $r3$.ɵtemplate(0, MyComponent_ng_template_Template_0, 0, 0, "ng-template", $c0_a0$);
} }
if (rf & 2) { if (rf & 2) {
$r3$.ɵelementProperty(0, "someDirective", $r3$.ɵbind(true)); $r3$.ɵelementProperty(0, "someDirective", $r3$.ɵbind(true));
@ -233,7 +345,7 @@ describe('compiler compliance: directives', () => {
… …
template: function MyComponent_Template(rf, ctx) { template: function MyComponent_Template(rf, ctx) {
if (rf & 1) { if (rf & 1) {
$r3$.ɵtemplate(0, MyComponent_div_Template_0, 1, 0, null, $c0_a0$); $r3$.ɵtemplate(0, MyComponent_div_Template_0, 1, 0, "div", $c0_a0$);
} }
}, },
… …

64
packages/compiler-cli/test/compliance/r3_view_compiler_i18n_spec.ts
View File

@ -422,7 +422,7 @@ describe('i18n support in the view compiler', () => {
vars: 1, vars: 1,
template: function MyComponent_Template(rf, ctx) { template: function MyComponent_Template(rf, ctx) {
if (rf & 1) { if (rf & 1) {
$r3$.ɵtemplate(0, MyComponent_div_Template_0, 4, 3, null, $_c0$); $r3$.ɵtemplate(0, MyComponent_div_Template_0, 4, 3, "div", $_c0$);
} }
if (rf & 2) { if (rf & 2) {
$r3$.ɵelementProperty(0, "ngForOf", $r3$.ɵbind(ctx.items)); $r3$.ɵelementProperty(0, "ngForOf", $r3$.ɵbind(ctx.items));
@ -551,7 +551,7 @@ describe('i18n support in the view compiler', () => {
vars: 1, vars: 1,
template: function MyComponent_Template(rf, ctx) { template: function MyComponent_Template(rf, ctx) {
if (rf & 1) { if (rf & 1) {
$r3$.ɵtemplate(0, MyComponent_div_Template_0, 4, 3, null, $_c0$); $r3$.ɵtemplate(0, MyComponent_div_Template_0, 4, 3, "div", $_c0$);
} }
if (rf & 2) { if (rf & 2) {
$r3$.ɵelementProperty(0, "ngForOf", $r3$.ɵbind(ctx.items)); $r3$.ɵelementProperty(0, "ngForOf", $r3$.ɵbind(ctx.items));
@ -955,7 +955,7 @@ describe('i18n support in the view compiler', () => {
if (rf & 1) { if (rf & 1) {
$r3$.ɵelementStart(0, "div"); $r3$.ɵelementStart(0, "div");
$r3$.ɵtext(1, " Some content "); $r3$.ɵtext(1, " Some content ");
$r3$.ɵtemplate(2, MyComponent_div_Template_2, 5, 4, null, $_c0$); $r3$.ɵtemplate(2, MyComponent_div_Template_2, 5, 4, "div", $_c0$);
$r3$.ɵelementEnd(); $r3$.ɵelementEnd();
} }
if (rf & 2) { if (rf & 2) {
@ -1004,8 +1004,8 @@ describe('i18n support in the view compiler', () => {
template: function MyComponent_Template(rf, ctx) { template: function MyComponent_Template(rf, ctx) {
if (rf & 1) { if (rf & 1) {
$r3$.ɵelement(0, "img", $_c0$); $r3$.ɵelement(0, "img", $_c0$);
$r3$.ɵtemplate(1, MyComponent_img_Template_1, 1, 0, null, $_c1$); $r3$.ɵtemplate(1, MyComponent_img_Template_1, 1, 0, "img", $_c1$);
$r3$.ɵtemplate(2, MyComponent_img_Template_2, 2, 1, null, $_c1$); $r3$.ɵtemplate(2, MyComponent_img_Template_2, 2, 1, "img", $_c1$);
} }
if (rf & 2) { if (rf & 2) {
$r3$.ɵelementProperty(1, "ngIf", $r3$.ɵbind(ctx.visible)); $r3$.ɵelementProperty(1, "ngIf", $r3$.ɵbind(ctx.visible));
@ -1065,7 +1065,7 @@ describe('i18n support in the view compiler', () => {
$r3$.ɵelementStart(1, "div"); $r3$.ɵelementStart(1, "div");
$r3$.ɵelementStart(2, "div"); $r3$.ɵelementStart(2, "div");
$r3$.ɵpipe(3, "uppercase"); $r3$.ɵpipe(3, "uppercase");
$r3$.ɵtemplate(4, MyComponent_div_div_Template_4, 3, 2, null, $_c1$); $r3$.ɵtemplate(4, MyComponent_div_div_Template_4, 3, 2, "div", $_c1$);
$r3$.ɵelementEnd(); $r3$.ɵelementEnd();
$r3$.ɵelementEnd(); $r3$.ɵelementEnd();
$r3$.ɵi18nEnd(); $r3$.ɵi18nEnd();
@ -1115,8 +1115,8 @@ describe('i18n support in the view compiler', () => {
if (rf & 1) { if (rf & 1) {
$r3$.ɵelementStart(0, "div"); $r3$.ɵelementStart(0, "div");
$r3$.ɵi18nStart(1, $I18N_EXTERNAL_1221890473527419724$$APP_SPEC_TS_0$); $r3$.ɵi18nStart(1, $I18N_EXTERNAL_1221890473527419724$$APP_SPEC_TS_0$);
$r3$.ɵtemplate(2, MyComponent_div_Template_2, 5, 5, null, $_c1$); $r3$.ɵtemplate(2, MyComponent_div_Template_2, 5, 5, "div", $_c1$);
$r3$.ɵtemplate(3, MyComponent_div_Template_3, 4, 4, null, $_c1$); $r3$.ɵtemplate(3, MyComponent_div_Template_3, 4, 4, "div", $_c1$);
$r3$.ɵi18nEnd(); $r3$.ɵi18nEnd();
$r3$.ɵelementEnd(); $r3$.ɵelementEnd();
} }
@ -1162,7 +1162,7 @@ describe('i18n support in the view compiler', () => {
vars: 1, vars: 1,
template: function MyComponent_Template(rf, ctx) { template: function MyComponent_Template(rf, ctx) {
if (rf & 1) { if (rf & 1) {
$r3$.ɵtemplate(0, MyComponent_div_Template_0, 3, 1, null, $_c0$); $r3$.ɵtemplate(0, MyComponent_div_Template_0, 3, 1, "div", $_c0$);
} }
if (rf & 2) { if (rf & 2) {
$r3$.ɵelementProperty(0, "ngIf", $r3$.ɵbind(ctx.visible)); $r3$.ɵelementProperty(0, "ngIf", $r3$.ɵbind(ctx.visible));
@ -1233,7 +1233,7 @@ describe('i18n support in the view compiler', () => {
const output = String.raw ` const output = String.raw `
const $MSG_EXTERNAL_2413150872298537152$$APP_SPEC_TS_0$ = goog.getMsg("My i18n block #2"); const $MSG_EXTERNAL_2413150872298537152$$APP_SPEC_TS_0$ = goog.getMsg("My i18n block #2");
const $MSG_EXTERNAL_4890179241114413722$$APP_SPEC_TS__1$ = goog.getMsg("My i18n block #1"); const $MSG_EXTERNAL_4890179241114413722$$APP_SPEC_TS__1$ = goog.getMsg("My i18n block #1");
function Template_0(rf, ctx) { function MyComponent_ng_template_Template_0(rf, ctx) {
if (rf & 1) { if (rf & 1) {
$r3$.ɵi18n(0, $MSG_EXTERNAL_4890179241114413722$$APP_SPEC_TS__1$); $r3$.ɵi18n(0, $MSG_EXTERNAL_4890179241114413722$$APP_SPEC_TS__1$);
} }
@ -1241,7 +1241,7 @@ describe('i18n support in the view compiler', () => {
… …
template: function MyComponent_Template(rf, ctx) { template: function MyComponent_Template(rf, ctx) {
if (rf & 1) { if (rf & 1) {
$r3$.ɵtemplate(0, Template_0, 1, 0); $r3$.ɵtemplate(0, MyComponent_ng_template_Template_0, 1, 0, "ng-template");
$r3$.ɵelementContainerStart(1); $r3$.ɵelementContainerStart(1);
$r3$.ɵi18n(2, $MSG_EXTERNAL_2413150872298537152$$APP_SPEC_TS_0$); $r3$.ɵi18n(2, $MSG_EXTERNAL_2413150872298537152$$APP_SPEC_TS_0$);
$r3$.ɵelementContainerEnd(); $r3$.ɵelementContainerEnd();
@ -1325,7 +1325,7 @@ describe('i18n support in the view compiler', () => {
const $MSG_EXTERNAL_355394464191978948$$APP_SPEC_TS__0$ = goog.getMsg("Some content: {$interpolation}", { const $MSG_EXTERNAL_355394464191978948$$APP_SPEC_TS__0$ = goog.getMsg("Some content: {$interpolation}", {
"interpolation": "\uFFFD0\uFFFD" "interpolation": "\uFFFD0\uFFFD"
}); });
function Template_0(rf, ctx) { function MyComponent_ng_template_Template_0(rf, ctx) {
if (rf & 1) { if (rf & 1) {
$r3$.ɵi18n(0, $MSG_EXTERNAL_355394464191978948$$APP_SPEC_TS__0$); $r3$.ɵi18n(0, $MSG_EXTERNAL_355394464191978948$$APP_SPEC_TS__0$);
$r3$.ɵpipe(1, "uppercase"); $r3$.ɵpipe(1, "uppercase");
@ -1340,7 +1340,7 @@ describe('i18n support in the view compiler', () => {
vars: 0, vars: 0,
template: function MyComponent_Template(rf, ctx) { template: function MyComponent_Template(rf, ctx) {
if (rf & 1) { if (rf & 1) {
$r3$.ɵtemplate(0, Template_0, 2, 3); $r3$.ɵtemplate(0, MyComponent_ng_template_Template_0, 2, 3, "ng-template");
} }
} }
`; `;
@ -1365,7 +1365,7 @@ describe('i18n support in the view compiler', () => {
"closeTagNgContainer": "\uFFFD/#3\uFFFD", "closeTagNgContainer": "\uFFFD/#3\uFFFD",
"interpolation": "\uFFFD0:1\uFFFD" "interpolation": "\uFFFD0:1\uFFFD"
}); });
function Template_2(rf, ctx) { function MyComponent_ng_template_Template_2(rf, ctx) {
if (rf & 1) { if (rf & 1) {
$r3$.ɵi18n(0, $MSG_EXTERNAL_702706566400598764$$APP_SPEC_TS_0$, 1); $r3$.ɵi18n(0, $MSG_EXTERNAL_702706566400598764$$APP_SPEC_TS_0$, 1);
$r3$.ɵpipe(1, "uppercase"); $r3$.ɵpipe(1, "uppercase");
@ -1383,7 +1383,7 @@ describe('i18n support in the view compiler', () => {
if (rf & 1) { if (rf & 1) {
$r3$.ɵelementStart(0, "div"); $r3$.ɵelementStart(0, "div");
$r3$.ɵi18nStart(1, $MSG_EXTERNAL_702706566400598764$$APP_SPEC_TS_0$); $r3$.ɵi18nStart(1, $MSG_EXTERNAL_702706566400598764$$APP_SPEC_TS_0$);
$r3$.ɵtemplate(2, Template_2, 2, 3); $r3$.ɵtemplate(2, MyComponent_ng_template_Template_2, 2, 3, "ng-template");
$r3$.ɵelementContainerStart(3); $r3$.ɵelementContainerStart(3);
$r3$.ɵpipe(4, "uppercase"); $r3$.ɵpipe(4, "uppercase");
$r3$.ɵelementContainerEnd(); $r3$.ɵelementContainerEnd();
@ -1415,7 +1415,7 @@ describe('i18n support in the view compiler', () => {
const $I18N_EXTERNAL_7842238767399919809$$APP_SPEC_TS__1$ = $r3$.ɵi18nPostprocess($MSG_EXTERNAL_7842238767399919809$$APP_SPEC_TS__1$, { const $I18N_EXTERNAL_7842238767399919809$$APP_SPEC_TS__1$ = $r3$.ɵi18nPostprocess($MSG_EXTERNAL_7842238767399919809$$APP_SPEC_TS__1$, {
"VAR_SELECT": "\uFFFD0\uFFFD" "VAR_SELECT": "\uFFFD0\uFFFD"
}); });
function Template_0(rf, ctx) { function MyComponent_ng_template_Template_0(rf, ctx) {
if (rf & 1) { if (rf & 1) {
$r3$.ɵi18n(0, $I18N_EXTERNAL_7842238767399919809$$APP_SPEC_TS__1$); $r3$.ɵi18n(0, $I18N_EXTERNAL_7842238767399919809$$APP_SPEC_TS__1$);
} }
@ -1430,7 +1430,7 @@ describe('i18n support in the view compiler', () => {
vars: 1, vars: 1,
template: function MyComponent_Template(rf, ctx) { template: function MyComponent_Template(rf, ctx) {
if (rf & 1) { if (rf & 1) {
$r3$.ɵtemplate(0, Template_0, 1, 1); $r3$.ɵtemplate(0, MyComponent_ng_template_Template_0, 1, 1, "ng-template");
$r3$.ɵelementContainerStart(1); $r3$.ɵelementContainerStart(1);
$r3$.ɵi18n(2, $I18N_EXTERNAL_8806993169187953163$$APP_SPEC_TS_0$); $r3$.ɵi18n(2, $I18N_EXTERNAL_8806993169187953163$$APP_SPEC_TS_0$);
$r3$.ɵelementContainerEnd(); $r3$.ɵelementContainerEnd();
@ -1461,7 +1461,7 @@ describe('i18n support in the view compiler', () => {
`; `;
const output = String.raw ` const output = String.raw `
function Template_1(rf, ctx) { function MyComponent_ng_template_ng_template_ng_template_Template_1(rf, ctx) {
if (rf & 1) { if (rf & 1) {
$r3$.ɵi18n(0, $I18N_EXTERNAL_2051477021417799640$$APP_SPEC_TS_0$, 3); $r3$.ɵi18n(0, $I18N_EXTERNAL_2051477021417799640$$APP_SPEC_TS_0$, 3);
} }
@ -1471,10 +1471,10 @@ describe('i18n support in the view compiler', () => {
$r3$.ɵi18nApply(0); $r3$.ɵi18nApply(0);
} }
} }
function Template_2(rf, ctx) { function MyComponent_ng_template_ng_template_Template_2(rf, ctx) {
if (rf & 1) { if (rf & 1) {
$r3$.ɵi18nStart(0, $I18N_EXTERNAL_2051477021417799640$$APP_SPEC_TS_0$, 2); $r3$.ɵi18nStart(0, $I18N_EXTERNAL_2051477021417799640$$APP_SPEC_TS_0$, 2);
$r3$.ɵtemplate(1, Template_1, 1, 1); $r3$.ɵtemplate(1, MyComponent_ng_template_ng_template_ng_template_Template_1, 1, 1, "ng-template");
$r3$.ɵi18nEnd(); $r3$.ɵi18nEnd();
} }
if (rf & 2) { if (rf & 2) {
@ -1491,11 +1491,11 @@ describe('i18n support in the view compiler', () => {
"interpolation_2": "\uFFFD0:3\uFFFD" "interpolation_2": "\uFFFD0:3\uFFFD"
}); });
const $I18N_EXTERNAL_2051477021417799640$$APP_SPEC_TS_0$ = $r3$.ɵi18nPostprocess($MSG_EXTERNAL_2051477021417799640$$APP_SPEC_TS_0$); const $I18N_EXTERNAL_2051477021417799640$$APP_SPEC_TS_0$ = $r3$.ɵi18nPostprocess($MSG_EXTERNAL_2051477021417799640$$APP_SPEC_TS_0$);
function Template_2(rf, ctx) { function MyComponent_ng_template_Template_2(rf, ctx) {
if (rf & 1) { if (rf & 1) {
$r3$.ɵi18nStart(0, $I18N_EXTERNAL_2051477021417799640$$APP_SPEC_TS_0$, 1); $r3$.ɵi18nStart(0, $I18N_EXTERNAL_2051477021417799640$$APP_SPEC_TS_0$, 1);
$r3$.ɵpipe(1, "uppercase"); $r3$.ɵpipe(1, "uppercase");
$r3$.ɵtemplate(2, Template_2, 2, 1); $r3$.ɵtemplate(2, MyComponent_ng_template_ng_template_Template_2, 2, 1, "ng-template");
$r3$.ɵi18nEnd(); $r3$.ɵi18nEnd();
} }
if (rf & 2) { if (rf & 2) {
@ -1511,7 +1511,7 @@ describe('i18n support in the view compiler', () => {
if (rf & 1) { if (rf & 1) {
$r3$.ɵelementStart(0, "div"); $r3$.ɵelementStart(0, "div");
$r3$.ɵi18nStart(1, $I18N_EXTERNAL_2051477021417799640$$APP_SPEC_TS_0$); $r3$.ɵi18nStart(1, $I18N_EXTERNAL_2051477021417799640$$APP_SPEC_TS_0$);
$r3$.ɵtemplate(2, Template_2, 3, 3); $r3$.ɵtemplate(2, MyComponent_ng_template_Template_2, 3, 3, "ng-template");
$r3$.ɵi18nEnd(); $r3$.ɵi18nEnd();
$r3$.ɵelementEnd(); $r3$.ɵelementEnd();
} }
@ -1536,7 +1536,7 @@ describe('i18n support in the view compiler', () => {
const $I18N_EXTERNAL_8806993169187953163$$APP_SPEC_TS__1$ = $r3$.ɵi18nPostprocess($MSG_EXTERNAL_8806993169187953163$$APP_SPEC_TS__1$, { const $I18N_EXTERNAL_8806993169187953163$$APP_SPEC_TS__1$ = $r3$.ɵi18nPostprocess($MSG_EXTERNAL_8806993169187953163$$APP_SPEC_TS__1$, {
"VAR_SELECT": "\uFFFD0\uFFFD" "VAR_SELECT": "\uFFFD0\uFFFD"
}); });
function Template_2(rf, ctx) { function MyComponent_ng_template_Template_2(rf, ctx) {
if (rf & 1) { if (rf & 1) {
$r3$.ɵi18n(0, $I18N_EXTERNAL_8806993169187953163$$APP_SPEC_TS__1$); $r3$.ɵi18n(0, $I18N_EXTERNAL_8806993169187953163$$APP_SPEC_TS__1$);
} }
@ -1554,7 +1554,7 @@ describe('i18n support in the view compiler', () => {
$r3$.ɵelementContainerStart(0); $r3$.ɵelementContainerStart(0);
$r3$.ɵi18n(1, $I18N_EXTERNAL_7842238767399919809$$APP_SPEC_TS_0$); $r3$.ɵi18n(1, $I18N_EXTERNAL_7842238767399919809$$APP_SPEC_TS_0$);
$r3$.ɵelementContainerEnd(); $r3$.ɵelementContainerEnd();
$r3$.ɵtemplate(2, Template_2, 1, 1); $r3$.ɵtemplate(2, MyComponent_ng_template_Template_2, 1, 1, "ng-template");
} }
if (rf & 2) { if (rf & 2) {
$r3$.ɵi18nExp($r3$.ɵbind(ctx.gender)); $r3$.ɵi18nExp($r3$.ɵbind(ctx.gender));
@ -1584,7 +1584,7 @@ describe('i18n support in the view compiler', () => {
const $MSG_EXTERNAL_461986953980355147$$APP_SPEC_TS__2$ = goog.getMsg("{$tagImg} is my logo #2 ", { const $MSG_EXTERNAL_461986953980355147$$APP_SPEC_TS__2$ = goog.getMsg("{$tagImg} is my logo #2 ", {
"tagImg": "\uFFFD#1\uFFFD\uFFFD/#1\uFFFD" "tagImg": "\uFFFD#1\uFFFD\uFFFD/#1\uFFFD"
}); });
function Template_3(rf, ctx) { function MyComponent_ng_template_Template_3(rf, ctx) {
if (rf & 1) { if (rf & 1) {
$r3$.ɵi18nStart(0, $MSG_EXTERNAL_461986953980355147$$APP_SPEC_TS__2$); $r3$.ɵi18nStart(0, $MSG_EXTERNAL_461986953980355147$$APP_SPEC_TS__2$);
$r3$.ɵelement(1, "img", $_c0$); $r3$.ɵelement(1, "img", $_c0$);
@ -1599,7 +1599,7 @@ describe('i18n support in the view compiler', () => {
$r3$.ɵelement(2, "img", $_c0$); $r3$.ɵelement(2, "img", $_c0$);
$r3$.ɵi18nEnd(); $r3$.ɵi18nEnd();
$r3$.ɵelementContainerEnd(); $r3$.ɵelementContainerEnd();
$r3$.ɵtemplate(3, Template_3, 2, 0); $r3$.ɵtemplate(3, MyComponent_ng_template_Template_3, 2, 0, "ng-template");
} }
} }
`; `;
@ -1749,8 +1749,8 @@ describe('i18n support in the view compiler', () => {
$r3$.ɵelementStart(0, "div"); $r3$.ɵelementStart(0, "div");
$r3$.ɵi18n(1, $I18N_EXTERNAL_7842238767399919809$$APP_SPEC_TS_0$); $r3$.ɵi18n(1, $I18N_EXTERNAL_7842238767399919809$$APP_SPEC_TS_0$);
$r3$.ɵelementEnd(); $r3$.ɵelementEnd();
$r3$.ɵtemplate(2, MyComponent_div_Template_2, 2, 1, null, $_c0$); $r3$.ɵtemplate(2, MyComponent_div_Template_2, 2, 1, "div", $_c0$);
$r3$.ɵtemplate(3, MyComponent_div_Template_3, 4, 2, null, $_c0$); $r3$.ɵtemplate(3, MyComponent_div_Template_3, 4, 2, "div", $_c0$);
} }
if (rf & 2) { if (rf & 2) {
$r3$.ɵi18nExp($r3$.ɵbind(ctx.gender)); $r3$.ɵi18nExp($r3$.ɵbind(ctx.gender));
@ -1976,7 +1976,7 @@ describe('i18n support in the view compiler', () => {
$r3$.ɵelementStart(0, "div"); $r3$.ɵelementStart(0, "div");
$r3$.ɵi18nStart(1, $I18N_APP_SPEC_TS_0$); $r3$.ɵi18nStart(1, $I18N_APP_SPEC_TS_0$);
$r3$.ɵelement(2, "div"); $r3$.ɵelement(2, "div");
$r3$.ɵtemplate(3, MyComponent_div_Template_3, 2, 1, null, $_c3$); $r3$.ɵtemplate(3, MyComponent_div_Template_3, 2, 1, "div", $_c3$);
$r3$.ɵi18nEnd(); $r3$.ɵi18nEnd();
$r3$.ɵelementEnd(); $r3$.ɵelementEnd();
} }
@ -2080,7 +2080,7 @@ describe('i18n support in the view compiler', () => {
if (rf & 1) { if (rf & 1) {
$r3$.ɵelementStart(0, "div"); $r3$.ɵelementStart(0, "div");
$r3$.ɵi18nStart(1, $MSG_EXTERNAL_1194472282609532229$$APP_SPEC_TS_0$); $r3$.ɵi18nStart(1, $MSG_EXTERNAL_1194472282609532229$$APP_SPEC_TS_0$);
$r3$.ɵtemplate(2, MyComponent_span_Template_2, 2, 1, null, $_c2$); $r3$.ɵtemplate(2, MyComponent_span_Template_2, 2, 1, "span", $_c2$);
$r3$.ɵi18nEnd(); $r3$.ɵi18nEnd();
$r3$.ɵelementEnd(); $r3$.ɵelementEnd();
} }
@ -2146,7 +2146,7 @@ describe('i18n support in the view compiler', () => {
if (rf & 1) { if (rf & 1) {
$r3$.ɵelementStart(0, "div"); $r3$.ɵelementStart(0, "div");
$r3$.ɵi18nStart(1, $MSG_EXTERNAL_7186042105600518133$$APP_SPEC_TS_0$); $r3$.ɵi18nStart(1, $MSG_EXTERNAL_7186042105600518133$$APP_SPEC_TS_0$);
$r3$.ɵtemplate(2, MyComponent_span_Template_2, 2, 2, null, $_c2$); $r3$.ɵtemplate(2, MyComponent_span_Template_2, 2, 2, "span", $_c2$);
$r3$.ɵi18nEnd(); $r3$.ɵi18nEnd();
$r3$.ɵelementEnd(); $r3$.ɵelementEnd();
} }

2
packages/compiler-cli/test/compliance/r3_view_compiler_listener_spec.ts
View File

@ -160,7 +160,7 @@ describe('compiler compliance: listen()', () => {
// ... // ...
template: function MyComponent_Template(rf, ctx) { template: function MyComponent_Template(rf, ctx) {
if (rf & 1) { if (rf & 1) {
$r3$.ɵtemplate(0, MyComponent_div_Template_0, 3, 0, null, $c0$); $r3$.ɵtemplate(0, MyComponent_div_Template_0, 3, 0, "div", $c0$);
} }
if (rf & 2) { if (rf & 2) {
$i0$.ɵelementProperty(0, "ngIf", $i0$.ɵbind(ctx.showing)); $i0$.ɵelementProperty(0, "ngIf", $i0$.ɵbind(ctx.showing));

30
packages/compiler-cli/test/compliance/r3_view_compiler_template_spec.ts
View File

@ -82,7 +82,7 @@ describe('compiler compliance: template', () => {
function MyComponent_ul_li_Template_1(rf, ctx) { function MyComponent_ul_li_Template_1(rf, ctx) {
if (rf & 1) { if (rf & 1) {
$i0$.ɵelementStart(0, "li"); $i0$.ɵelementStart(0, "li");
$i0$.ɵtemplate(1, MyComponent_ul_li_div_Template_1, 2, 2, null, _c0); $i0$.ɵtemplate(1, MyComponent_ul_li_div_Template_1, 2, 2, "div", _c0);
$i0$.ɵelementEnd(); $i0$.ɵelementEnd();
} }
if (rf & 2) { if (rf & 2) {
@ -94,7 +94,7 @@ describe('compiler compliance: template', () => {
function MyComponent_ul_Template_0(rf, ctx) { function MyComponent_ul_Template_0(rf, ctx) {
if (rf & 1) { if (rf & 1) {
$i0$.ɵelementStart(0, "ul"); $i0$.ɵelementStart(0, "ul");
$i0$.ɵtemplate(1, MyComponent_ul_li_Template_1, 2, 1, null, _c0); $i0$.ɵtemplate(1, MyComponent_ul_li_Template_1, 2, 1, "li", _c0);
$i0$.ɵelementEnd(); $i0$.ɵelementEnd();
} }
if (rf & 2) { if (rf & 2) {
@ -105,7 +105,7 @@ describe('compiler compliance: template', () => {
// ... // ...
template:function MyComponent_Template(rf, ctx){ template:function MyComponent_Template(rf, ctx){
if (rf & 1) { if (rf & 1) {
$i0$.ɵtemplate(0, MyComponent_ul_Template_0, 2, 1, null, _c0); $i0$.ɵtemplate(0, MyComponent_ul_Template_0, 2, 1, "ul", _c0);
} }
if (rf & 2) { if (rf & 2) {
$i0$.ɵelementProperty(0, "ngForOf", $i0$.ɵbind(ctx.items)); $i0$.ɵelementProperty(0, "ngForOf", $i0$.ɵbind(ctx.items));
@ -156,7 +156,7 @@ describe('compiler compliance: template', () => {
// ... // ...
template:function MyComponent_Template(rf, ctx){ template:function MyComponent_Template(rf, ctx){
if (rf & 1) { if (rf & 1) {
$i0$.ɵtemplate(0, MyComponent_span_Template_0, 2, 2, null, _c0); $i0$.ɵtemplate(0, MyComponent_span_Template_0, 2, 2, "span", _c0);
} }
if (rf & 2) { if (rf & 2) {
$i0$.ɵelementProperty(0, "ngForOf", $i0$.ɵbind(ctx.items)); $i0$.ɵelementProperty(0, "ngForOf", $i0$.ɵbind(ctx.items));
@ -212,7 +212,7 @@ describe('compiler compliance: template', () => {
function MyComponent_div_Template_0(rf, ctx) { function MyComponent_div_Template_0(rf, ctx) {
if (rf & 1) { if (rf & 1) {
$i0$.ɵelementStart(0, "div"); $i0$.ɵelementStart(0, "div");
$i0$.ɵtemplate(1, MyComponent_div_span_Template_1, 2, 2, null, $c1$); $i0$.ɵtemplate(1, MyComponent_div_span_Template_1, 2, 2, "span", $c1$);
$i0$.ɵelementEnd(); $i0$.ɵelementEnd();
} }
if (rf & 2) { if (rf & 2) {
@ -224,7 +224,7 @@ describe('compiler compliance: template', () => {
// ... // ...
template:function MyComponent_Template(rf, ctx){ template:function MyComponent_Template(rf, ctx){
if (rf & 1) { if (rf & 1) {
$i0$.ɵtemplate(0, MyComponent_div_Template_0, 2, 1, null, $c0$); $i0$.ɵtemplate(0, MyComponent_div_Template_0, 2, 1, "div", $c0$);
} }
if (rf & 2) { if (rf & 2) {
$i0$.ɵelementProperty(0, "ngForOf", $i0$.ɵbind(ctx.items)); $i0$.ɵelementProperty(0, "ngForOf", $i0$.ɵbind(ctx.items));
@ -280,7 +280,7 @@ describe('compiler compliance: template', () => {
function MyComponent_div_div_Template_1(rf, ctx) { function MyComponent_div_div_Template_1(rf, ctx) {
if (rf & 1) { if (rf & 1) {
$i0$.ɵelementStart(0, "div"); $i0$.ɵelementStart(0, "div");
$i0$.ɵtemplate(1, MyComponent_div_div_div_Template_1, 2, 2, null, _c0); $i0$.ɵtemplate(1, MyComponent_div_div_div_Template_1, 2, 2, "div", _c0);
$i0$.ɵelementEnd(); $i0$.ɵelementEnd();
} }
if (rf & 2) { if (rf & 2) {
@ -292,7 +292,7 @@ describe('compiler compliance: template', () => {
function MyComponent_div_Template_0(rf, ctx) { function MyComponent_div_Template_0(rf, ctx) {
if (rf & 1) { if (rf & 1) {
$i0$.ɵelementStart(0, "div"); $i0$.ɵelementStart(0, "div");
$i0$.ɵtemplate(1, MyComponent_div_div_Template_1, 2, 1, null, _c0); $i0$.ɵtemplate(1, MyComponent_div_div_Template_1, 2, 1, "div", _c0);
$i0$.ɵelementEnd(); $i0$.ɵelementEnd();
} }
if (rf & 2) { if (rf & 2) {
@ -303,7 +303,7 @@ describe('compiler compliance: template', () => {
// ... // ...
template:function MyComponent_Template(rf, ctx){ template:function MyComponent_Template(rf, ctx){
if (rf & 1) { if (rf & 1) {
$i0$.ɵtemplate(0, MyComponent_div_Template_0, 2, 1, null, _c0); $i0$.ɵtemplate(0, MyComponent_div_Template_0, 2, 1, "div", _c0);
} }
if (rf & 2) { if (rf & 2) {
$i0$.ɵelementProperty(0, "ngForOf", $i0$.ɵbind(ctx.items)); $i0$.ɵelementProperty(0, "ngForOf", $i0$.ɵbind(ctx.items));
@ -339,7 +339,7 @@ describe('compiler compliance: template', () => {
const template = ` const template = `
const $c0$ = ["attr", "l", ${AttributeMarker.SelectOnly}, "boundAttr"]; const $c0$ = ["attr", "l", ${AttributeMarker.SelectOnly}, "boundAttr"];
function Template_0(rf, ctx) { function MyComponent_ng_template_Template_0(rf, ctx) {
if (rf & 1) { if (rf & 1) {
$i0$.ɵtext(0, " some-content "); $i0$.ɵtext(0, " some-content ");
} }
@ -349,7 +349,7 @@ describe('compiler compliance: template', () => {
template: function MyComponent_Template(rf, ctx) { template: function MyComponent_Template(rf, ctx) {
if (rf & 1) { if (rf & 1) {
$i0$.ɵtemplate(0, Template_0, 1, 0, null, $c0$); $i0$.ɵtemplate(0, MyComponent_ng_template_Template_0, 1, 0, "ng-template", $c0$);
} }
if (rf & 2) { if (rf & 2) {
$i0$.ɵelementProperty(0, "boundAttr", $i0$.ɵbind(ctx.b)); $i0$.ɵelementProperty(0, "boundAttr", $i0$.ɵbind(ctx.b));
@ -383,7 +383,7 @@ describe('compiler compliance: template', () => {
const template = ` const template = `
const $t0_refs$ = ["foo", ""]; const $t0_refs$ = ["foo", ""];
function Template_0(rf, ctx) { function MyComponent_ng_template_Template_0(rf, ctx) {
if (rf & 1) { if (rf & 1) {
$i0$.ɵtext(0, "some-content"); $i0$.ɵtext(0, "some-content");
} }
@ -393,7 +393,7 @@ describe('compiler compliance: template', () => {
template: function MyComponent_Template(rf, ctx) { template: function MyComponent_Template(rf, ctx) {
if (rf & 1) { if (rf & 1) {
$i0$.ɵtemplate(0, Template_0, 1, 0, null, null, $t0_refs$, $i0$.ɵtemplateRefExtractor); $i0$.ɵtemplate(0, MyComponent_ng_template_Template_0, 1, 0, "ng-template", null, $t0_refs$, $i0$.ɵtemplateRefExtractor);
} }
}`; }`;
@ -424,13 +424,13 @@ describe('compiler compliance: template', () => {
const template = ` const template = `
const $t0_attrs$ = [${AttributeMarker.SelectOnly}, "outDirective"]; const $t0_attrs$ = [${AttributeMarker.SelectOnly}, "outDirective"];
function Template_0(rf, ctx) { } function MyComponent_ng_template_Template_0(rf, ctx) { }
// ... // ...
template: function MyComponent_Template(rf, ctx) { template: function MyComponent_Template(rf, ctx) {
if (rf & 1) { if (rf & 1) {
$i0$.ɵtemplate(0, Template_0, 0, 0, null, $t0_attrs$); $i0$.ɵtemplate(0, MyComponent_ng_template_Template_0, 0, 0, "ng-template", $t0_attrs$);
$i0$.ɵlistener("outDirective", function MyComponent_Template_ng_template_outDirective_listener($event) { return $event.doSth(); }); $i0$.ɵlistener("outDirective", function MyComponent_Template_ng_template_outDirective_listener($event) { return $event.doSth(); });
} }
}`; }`;

6
packages/compiler/src/render3/r3_ast.ts
View File

@ -73,7 +73,7 @@ export class Element implements Node {
export class Template implements Node { export class Template implements Node {
constructor( constructor(
public attributes: TextAttribute[], public inputs: BoundAttribute[], public tagName: string, public attributes: TextAttribute[], public inputs: BoundAttribute[],
public outputs: BoundEvent[], public children: Node[], public references: Reference[], public outputs: BoundEvent[], public children: Node[], public references: Reference[],
public variables: Variable[], public sourceSpan: ParseSourceSpan, public variables: Variable[], public sourceSpan: ParseSourceSpan,
public startSourceSpan: ParseSourceSpan|null, public endSourceSpan: ParseSourceSpan|null, public startSourceSpan: ParseSourceSpan|null, public endSourceSpan: ParseSourceSpan|null,
@ -189,8 +189,8 @@ export class TransformVisitor implements Visitor<Node> {
newChildren != template.children || newVariables != template.variables || newChildren != template.children || newVariables != template.variables ||
newReferences != template.references) { newReferences != template.references) {
return new Template( return new Template(
newAttributes, newInputs, newOutputs, newChildren, newReferences, newVariables, template.tagName, newAttributes, newInputs, newOutputs, newChildren, newReferences,
template.sourceSpan, template.startSourceSpan, template.endSourceSpan); newVariables, template.sourceSpan, template.startSourceSpan, template.endSourceSpan);
} }
return template; return template;
} }

9
packages/compiler/src/render3/r3_template_transform.ts
View File

@ -167,8 +167,8 @@ class HtmlAstToIvyAst implements html.Visitor {
const attrs = this.extractAttributes(element.name, parsedProperties, i18nAttrsMeta); const attrs = this.extractAttributes(element.name, parsedProperties, i18nAttrsMeta);
parsedElement = new t.Template( parsedElement = new t.Template(
attributes, attrs.bound, boundEvents, children, references, variables, element.sourceSpan, element.name, attributes, attrs.bound, boundEvents, children, references, variables,
element.startSourceSpan, element.endSourceSpan, element.i18n); element.sourceSpan, element.startSourceSpan, element.endSourceSpan, element.i18n);
} else { } else {
const attrs = this.extractAttributes(element.name, parsedProperties, i18nAttrsMeta); const attrs = this.extractAttributes(element.name, parsedProperties, i18nAttrsMeta);
parsedElement = new t.Element( parsedElement = new t.Element(
@ -180,8 +180,9 @@ class HtmlAstToIvyAst implements html.Visitor {
const attrs = this.extractAttributes('ng-template', templateParsedProperties, i18nAttrsMeta); const attrs = this.extractAttributes('ng-template', templateParsedProperties, i18nAttrsMeta);
// TODO(pk): test for this case // TODO(pk): test for this case
parsedElement = new t.Template( parsedElement = new t.Template(
attrs.literal, attrs.bound, [], [parsedElement], [], templateVariables, (parsedElement as t.Element).name, attrs.literal, attrs.bound, [], [parsedElement], [],
element.sourceSpan, element.startSourceSpan, element.endSourceSpan, element.i18n); templateVariables, element.sourceSpan, element.startSourceSpan, element.endSourceSpan,
element.i18n);
} }
return parsedElement; return parsedElement;
} }

12
packages/compiler/src/render3/view/template.ts
View File

@ -685,21 +685,15 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
this.i18n.appendTemplate(template.i18n !, templateIndex); this.i18n.appendTemplate(template.i18n !, templateIndex);
} }
let elName = ''; const tagName = sanitizeIdentifier(template.tagName || '');
if (isSingleElementTemplate(template.children)) { const contextName = tagName ? `${this.contextName}_${tagName}` : '';
// When the template as a single child, derive the context name from the tag
elName = sanitizeIdentifier(template.children[0].name);
}
const contextName = elName ? `${this.contextName}_${elName}` : '';
const templateName = const templateName =
contextName ? `${contextName}_Template_${templateIndex}` : `Template_${templateIndex}`; contextName ? `${contextName}_Template_${templateIndex}` : `Template_${templateIndex}`;
const parameters: o.Expression[] = [ const parameters: o.Expression[] = [
o.literal(templateIndex), o.literal(templateIndex),
o.variable(templateName), o.variable(templateName),
o.TYPED_NULL_EXPR, o.literal(template.tagName),
]; ];
// find directives matching on a given <ng-template> node // find directives matching on a given <ng-template> node

10
packages/core/src/render3/instructions.ts
View File

@ -194,7 +194,7 @@ export function createNodeAtIndex(
index: number, type: TNodeType.Projection, native: null, name: null, index: number, type: TNodeType.Projection, native: null, name: null,
attrs: TAttributes | null): TProjectionNode; attrs: TAttributes | null): TProjectionNode;
export function createNodeAtIndex( export function createNodeAtIndex(
index: number, type: TNodeType.ElementContainer, native: RComment, name: null, index: number, type: TNodeType.ElementContainer, native: RComment, name: string | null,
attrs: TAttributes | null): TElementContainerNode; attrs: TAttributes | null): TElementContainerNode;
export function createNodeAtIndex( export function createNodeAtIndex(
index: number, type: TNodeType.IcuContainer, native: RComment, name: null, index: number, type: TNodeType.IcuContainer, native: RComment, name: null,
@ -490,15 +490,17 @@ export function elementContainerStart(
const lView = getLView(); const lView = getLView();
const tView = lView[TVIEW]; const tView = lView[TVIEW];
const renderer = lView[RENDERER]; const renderer = lView[RENDERER];
const tagName = 'ng-container';
ngDevMode && assertEqual( ngDevMode && assertEqual(
lView[BINDING_INDEX], tView.bindingStartIndex, lView[BINDING_INDEX], tView.bindingStartIndex,
'element containers should be created before any bindings'); 'element containers should be created before any bindings');
ngDevMode && ngDevMode.rendererCreateComment++; ngDevMode && ngDevMode.rendererCreateComment++;
const native = renderer.createComment(ngDevMode ? 'ng-container' : ''); const native = renderer.createComment(ngDevMode ? tagName : '');
ngDevMode && assertDataInRange(lView, index - 1); ngDevMode && assertDataInRange(lView, index - 1);
const tNode = createNodeAtIndex(index, TNodeType.ElementContainer, native, null, attrs || null); const tNode =
createNodeAtIndex(index, TNodeType.ElementContainer, native, tagName, attrs || null);
appendChild(native, tNode, lView); appendChild(native, tNode, lView);
createDirectivesAndLocals(tView, lView, localRefs); createDirectivesAndLocals(tView, lView, localRefs);
@ -1646,7 +1648,7 @@ function findDirectiveMatches(tView: TView, viewData: LView, tNode: TNode): Dire
if (registry) { if (registry) {
for (let i = 0; i < registry.length; i++) { for (let i = 0; i < registry.length; i++) {
const def = registry[i] as ComponentDef<any>| DirectiveDef<any>; const def = registry[i] as ComponentDef<any>| DirectiveDef<any>;
if (isNodeMatchingSelectorList(tNode, def.selectors !)) { if (isNodeMatchingSelectorList(tNode, def.selectors !, /* isProjectionMode */ false)) {
matches || (matches = []); matches || (matches = []);
diPublicInInjector( diPublicInInjector(
getOrCreateNodeInjectorForNode( getOrCreateNodeInjectorForNode(

36
packages/core/src/render3/node_selector_matcher.ts
View File

@ -9,11 +9,13 @@
import './ng_dev_mode'; import './ng_dev_mode';
import {assertDefined, assertNotEqual} from './assert'; import {assertDefined, assertNotEqual} from './assert';
import {AttributeMarker, TAttributes, TNode, unusedValueExportToPlacateAjd as unused1} from './interfaces/node'; import {AttributeMarker, TAttributes, TNode, TNodeType, unusedValueExportToPlacateAjd as unused1} from './interfaces/node';
import {CssSelector, CssSelectorList, NG_PROJECT_AS_ATTR_NAME, SelectorFlags, unusedValueExportToPlacateAjd as unused2} from './interfaces/projection'; import {CssSelector, CssSelectorList, NG_PROJECT_AS_ATTR_NAME, SelectorFlags, unusedValueExportToPlacateAjd as unused2} from './interfaces/projection';
const unusedValueToPlacateAjd = unused1 + unused2; const unusedValueToPlacateAjd = unused1 + unused2;
const NG_TEMPLATE_SELECTOR = 'ng-template';
function isCssClassMatching(nodeClassAttrVal: string, cssClassToMatch: string): boolean { function isCssClassMatching(nodeClassAttrVal: string, cssClassToMatch: string): boolean {
const nodeClassesLen = nodeClassAttrVal.length; const nodeClassesLen = nodeClassAttrVal.length;
const matchIndex = nodeClassAttrVal !.indexOf(cssClassToMatch); const matchIndex = nodeClassAttrVal !.indexOf(cssClassToMatch);
@ -28,6 +30,24 @@ function isCssClassMatching(nodeClassAttrVal: string, cssClassToMatch: string):
return true; return true;
} }
/**
* Function that checks whether a given tNode matches tag-based selector and has a valid type.
*
* Matching can be perfomed in 2 modes: projection mode (when we project nodes) and regular
* directive matching mode. In "projection" mode, we do not need to check types, so if tag name
* matches selector, we declare a match. In "directive matching" mode, we also check whether tNode
* is of expected type:
* - whether tNode has either Element or ElementContainer type
* - or if we want to match "ng-template" tag, we check for Container type
*/
function hasTagAndTypeMatch(
tNode: TNode, currentSelector: string, isProjectionMode: boolean): boolean {
return currentSelector === tNode.tagName &&
(isProjectionMode ||
(tNode.type === TNodeType.Element || tNode.type === TNodeType.ElementContainer) ||
(tNode.type === TNodeType.Container && currentSelector === NG_TEMPLATE_SELECTOR));
}
/** /**
* A utility function to match an Ivy node static data against a simple CSS selector * A utility function to match an Ivy node static data against a simple CSS selector
* *
@ -35,7 +55,8 @@ function isCssClassMatching(nodeClassAttrVal: string, cssClassToMatch: string):
* @param selector * @param selector
* @returns true if node matches the selector. * @returns true if node matches the selector.
*/ */
export function isNodeMatchingSelector(tNode: TNode, selector: CssSelector): boolean { export function isNodeMatchingSelector(
tNode: TNode, selector: CssSelector, isProjectionMode: boolean): boolean {
ngDevMode && assertDefined(selector[0], 'Selector should have a tag name'); ngDevMode && assertDefined(selector[0], 'Selector should have a tag name');
let mode: SelectorFlags = SelectorFlags.ELEMENT; let mode: SelectorFlags = SelectorFlags.ELEMENT;
@ -65,7 +86,8 @@ export function isNodeMatchingSelector(tNode: TNode, selector: CssSelector): boo
if (mode & SelectorFlags.ELEMENT) { if (mode & SelectorFlags.ELEMENT) {
mode = SelectorFlags.ATTRIBUTE | mode & SelectorFlags.NOT; mode = SelectorFlags.ATTRIBUTE | mode & SelectorFlags.NOT;
if (current !== '' && current !== tNode.tagName || current === '' && selector.length === 1) { if (current !== '' && !hasTagAndTypeMatch(tNode, current, isProjectionMode) ||
current === '' && selector.length === 1) {
if (isPositive(mode)) return false; if (isPositive(mode)) return false;
skipToNextSelector = true; skipToNextSelector = true;
} }
@ -139,9 +161,10 @@ function findAttrIndexInNode(name: string, attrs: TAttributes | null): number {
return -1; return -1;
} }
export function isNodeMatchingSelectorList(tNode: TNode, selector: CssSelectorList): boolean { export function isNodeMatchingSelectorList(
tNode: TNode, selector: CssSelectorList, isProjectionMode: boolean = false): boolean {
for (let i = 0; i < selector.length; i++) { for (let i = 0; i < selector.length; i++) {
if (isNodeMatchingSelector(tNode, selector[i])) { if (isNodeMatchingSelector(tNode, selector[i], isProjectionMode)) {
return true; return true;
} }
} }
@ -176,7 +199,8 @@ export function matchingSelectorIndex(
// if a node has the ngProjectAs attribute match it against unparsed selector // if a node has the ngProjectAs attribute match it against unparsed selector
// match a node against a parsed selector only if ngProjectAs attribute is not present // match a node against a parsed selector only if ngProjectAs attribute is not present
if (ngProjectAsAttrVal === textSelectors[i] || if (ngProjectAsAttrVal === textSelectors[i] ||
ngProjectAsAttrVal === null && isNodeMatchingSelectorList(tNode, selectors[i])) { ngProjectAsAttrVal === null &&
isNodeMatchingSelectorList(tNode, selectors[i], /* isProjectionMode */ true)) {
return i + 1; // first matching selector "captures" a given node return i + 1; // first matching selector "captures" a given node
} }
} }

6
packages/core/test/bundling/todo/bundle.golden_symbols.json
View File

@ -113,6 +113,9 @@
{ {
"name": "NG_PROJECT_AS_ATTR_NAME" "name": "NG_PROJECT_AS_ATTR_NAME"
}, },
{
"name": "NG_TEMPLATE_SELECTOR"
},
{ {
"name": "NOT_FOUND" "name": "NOT_FOUND"
}, },
@ -830,6 +833,9 @@
{ {
"name": "hasPlayerBuilderChanged" "name": "hasPlayerBuilderChanged"
}, },
{
"name": "hasTagAndTypeMatch"
},
{ {
"name": "hasValueChanged" "name": "hasValueChanged"
}, },

2
packages/core/test/render3/change_detection_spec.ts
View File

@ -126,7 +126,7 @@ describe('change detection', () => {
*/ */
const App = createComponent('app', function(rf: RenderFlags, ctx: any) { const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template(0, FooTemplate, 2, 1, '', null, ['foo', ''], templateRefExtractor); template(0, FooTemplate, 2, 1, 'ng-template', null, ['foo', ''], templateRefExtractor);
element(2, 'structural-comp'); element(2, 'structural-comp');
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {

57
packages/core/test/render3/common_integration_spec.ts
View File

@ -48,7 +48,7 @@ describe('@angular/common integration', () => {
template: (rf: RenderFlags, ctx: MyApp) => { template: (rf: RenderFlags, ctx: MyApp) => {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
elementStart(0, 'ul'); elementStart(0, 'ul');
{ template(1, liTemplate, 2, 1, undefined, ['ngForOf', '']); } { template(1, liTemplate, 2, 1, 'li', ['ngForOf', '']); }
elementEnd(); elementEnd();
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
@ -111,7 +111,7 @@ describe('@angular/common integration', () => {
template: (rf: RenderFlags, ctx: MyApp) => { template: (rf: RenderFlags, ctx: MyApp) => {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
elementStart(0, 'ul'); elementStart(0, 'ul');
{ template(1, liTemplate, 2, 3, undefined, ['ngForOf', '']); } { template(1, liTemplate, 2, 3, 'li', ['ngForOf', '']); }
elementEnd(); elementEnd();
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
@ -175,7 +175,7 @@ describe('@angular/common integration', () => {
vars: 1, vars: 1,
template: (rf: RenderFlags, ctx: MyApp) => { template: (rf: RenderFlags, ctx: MyApp) => {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template(0, ngForTemplate, 1, 0, undefined, ['ngForOf', '']); template(0, ngForTemplate, 1, 0, 'comp', ['ngForOf', '']);
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
elementProperty(0, 'ngForOf', bind(ctx.rows)); elementProperty(0, 'ngForOf', bind(ctx.rows));
@ -247,7 +247,7 @@ describe('@angular/common integration', () => {
} }
elementEnd(); elementEnd();
elementStart(2, 'ul'); elementStart(2, 'ul');
{ template(3, liTemplate, 2, 1, undefined, ['ngForOf', '']); } { template(3, liTemplate, 2, 1, 'li', ['ngForOf', '']); }
elementEnd(); elementEnd();
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
@ -302,7 +302,7 @@ describe('@angular/common integration', () => {
template: (rf: RenderFlags, ctx: MyApp) => { template: (rf: RenderFlags, ctx: MyApp) => {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
elementStart(0, 'ul'); elementStart(0, 'ul');
{ template(1, liTemplate, 2, 1, null, ['ngForOf', '']); } { template(1, liTemplate, 2, 1, 'li', ['ngForOf', '']); }
elementEnd(); elementEnd();
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
@ -317,7 +317,7 @@ describe('@angular/common integration', () => {
function liTemplate(rf: RenderFlags, ctx: any) { function liTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
elementStart(0, 'li'); elementStart(0, 'li');
{ template(1, spanTemplate, 2, 3, null, ['ngForOf', '']); } { template(1, spanTemplate, 2, 3, 'span', ['ngForOf', '']); }
elementEnd(); elementEnd();
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
@ -392,7 +392,7 @@ describe('@angular/common integration', () => {
vars: 1, vars: 1,
template: (rf: RenderFlags, ctx: MyApp) => { template: (rf: RenderFlags, ctx: MyApp) => {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template(0, divTemplate, 2, 1, null, ['ngForOf', '']); template(0, divTemplate, 2, 1, 'div', ['ngForOf', '']);
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
elementProperty(0, 'ngForOf', bind(ctx.items)); elementProperty(0, 'ngForOf', bind(ctx.items));
@ -406,7 +406,7 @@ describe('@angular/common integration', () => {
function divTemplate(rf: RenderFlags, ctx: any) { function divTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
elementStart(0, 'div'); elementStart(0, 'div');
{ template(1, pTemplate, 3, 2, null, ['ngForOf', '']); } { template(1, pTemplate, 3, 2, 'p', ['ngForOf', '']); }
elementEnd(); elementEnd();
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
@ -486,7 +486,7 @@ describe('@angular/common integration', () => {
vars: 1, vars: 1,
template: (rf: RenderFlags, ctx: MyApp) => { template: (rf: RenderFlags, ctx: MyApp) => {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template(0, divTemplate, 2, 1, null, ['ngForOf', '']); template(0, divTemplate, 2, 1, 'div', ['ngForOf', '']);
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
elementProperty(0, 'ngForOf', bind(ctx.items)); elementProperty(0, 'ngForOf', bind(ctx.items));
@ -500,7 +500,7 @@ describe('@angular/common integration', () => {
function divTemplate(rf: RenderFlags, ctx: any) { function divTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
elementStart(0, 'div'); elementStart(0, 'div');
{ template(1, innerDivTemplate, 2, 1, null, ['ngForOf', '']); } { template(1, innerDivTemplate, 2, 1, 'div', ['ngForOf', '']); }
elementEnd(); elementEnd();
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
@ -512,7 +512,7 @@ describe('@angular/common integration', () => {
function innerDivTemplate(rf: RenderFlags, ctx: any) { function innerDivTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
elementStart(0, 'div'); elementStart(0, 'div');
{ template(1, spanTemplate, 2, 2, null, ['ngForOf', '']); } { template(1, spanTemplate, 2, 2, 'span', ['ngForOf', '']); }
elementEnd(); elementEnd();
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
@ -654,7 +654,7 @@ describe('@angular/common integration', () => {
vars: 1, vars: 1,
template: (rf: RenderFlags, ctx: MyApp) => { template: (rf: RenderFlags, ctx: MyApp) => {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template(0, itemTemplate0, 2, 1, null, ['ngForOf', '']); template(0, itemTemplate0, 2, 1, 'span', ['ngForOf', '']);
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
elementProperty(0, 'ngForOf', bind(ctx.items)); elementProperty(0, 'ngForOf', bind(ctx.items));
@ -668,7 +668,7 @@ describe('@angular/common integration', () => {
function itemTemplate0(rf: RenderFlags, ctx: any) { function itemTemplate0(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
elementStart(0, 'span'); elementStart(0, 'span');
{ template(1, itemTemplate1, 2, 1, null, ['ngForOf', '']); } { template(1, itemTemplate1, 2, 1, 'span', ['ngForOf', '']); }
elementEnd(); elementEnd();
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
@ -680,7 +680,7 @@ describe('@angular/common integration', () => {
function itemTemplate1(rf: RenderFlags, ctx: any) { function itemTemplate1(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
elementStart(0, 'span'); elementStart(0, 'span');
{ template(1, itemTemplate2, 2, 1, null, ['ngForOf', '']); } { template(1, itemTemplate2, 2, 1, 'span', ['ngForOf', '']); }
elementEnd(); elementEnd();
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
@ -692,7 +692,7 @@ describe('@angular/common integration', () => {
function itemTemplate2(rf: RenderFlags, ctx: any) { function itemTemplate2(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
elementStart(0, 'span'); elementStart(0, 'span');
{ template(1, itemTemplate3, 2, 1, null, ['ngForOf', '']); } { template(1, itemTemplate3, 2, 1, 'span', ['ngForOf', '']); }
elementEnd(); elementEnd();
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
@ -704,7 +704,7 @@ describe('@angular/common integration', () => {
function itemTemplate3(rf: RenderFlags, ctx: any) { function itemTemplate3(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
elementStart(0, 'span'); elementStart(0, 'span');
{ template(1, itemTemplate4, 2, 1, null, ['ngForOf', '']); } { template(1, itemTemplate4, 2, 1, 'span', ['ngForOf', '']); }
elementEnd(); elementEnd();
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
@ -716,7 +716,7 @@ describe('@angular/common integration', () => {
function itemTemplate4(rf: RenderFlags, ctx: any) { function itemTemplate4(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
elementStart(0, 'span'); elementStart(0, 'span');
{ template(1, itemTemplate5, 2, 1, null, ['ngForOf', '']); } { template(1, itemTemplate5, 2, 1, 'span', ['ngForOf', '']); }
elementEnd(); elementEnd();
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
@ -728,7 +728,7 @@ describe('@angular/common integration', () => {
function itemTemplate5(rf: RenderFlags, ctx: any) { function itemTemplate5(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
elementStart(0, 'span'); elementStart(0, 'span');
{ template(1, itemTemplate6, 2, 1, null, ['ngForOf', '']); } { template(1, itemTemplate6, 2, 1, 'span', ['ngForOf', '']); }
elementEnd(); elementEnd();
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
@ -740,7 +740,7 @@ describe('@angular/common integration', () => {
function itemTemplate6(rf: RenderFlags, ctx: any) { function itemTemplate6(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
elementStart(0, 'span'); elementStart(0, 'span');
{ template(1, itemTemplate7, 2, 1, null, ['ngForOf', '']); } { template(1, itemTemplate7, 2, 1, 'span', ['ngForOf', '']); }
elementEnd(); elementEnd();
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
@ -752,7 +752,7 @@ describe('@angular/common integration', () => {
function itemTemplate7(rf: RenderFlags, ctx: any) { function itemTemplate7(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
elementStart(0, 'span'); elementStart(0, 'span');
{ template(1, itemTemplate8, 2, 10, null, ['ngForOf', '']); } { template(1, itemTemplate8, 2, 10, 'span', ['ngForOf', '']); }
elementEnd(); elementEnd();
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
@ -822,8 +822,8 @@ describe('@angular/common integration', () => {
*/ */
template: (rf: RenderFlags, ctx: MyApp) => { template: (rf: RenderFlags, ctx: MyApp) => {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template(0, templateOne, 2, 1, undefined, ['ngIf', '']); template(0, templateOne, 2, 1, 'div', ['ngIf', '']);
template(1, templateTwo, 2, 1, undefined, ['ngIf', '']); template(1, templateTwo, 2, 1, 'div', ['ngIf', '']);
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
elementProperty(0, 'ngIf', bind(ctx.showing)); elementProperty(0, 'ngIf', bind(ctx.showing));
@ -892,7 +892,7 @@ describe('@angular/common integration', () => {
vars: 1, vars: 1,
template: (rf: RenderFlags, ctx: AppComponent) => { template: (rf: RenderFlags, ctx: AppComponent) => {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template(0, divTemplate, 2, 1, undefined, ['ngIf', '']); template(0, divTemplate, 2, 1, 'div', ['ngIf', '']);
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
elementProperty(0, 'ngIf', bind(ctx.showing)); elementProperty(0, 'ngIf', bind(ctx.showing));
@ -906,7 +906,7 @@ describe('@angular/common integration', () => {
function divTemplate(rf: RenderFlags, ctx: any) { function divTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
elementStart(0, 'div'); elementStart(0, 'div');
{ template(1, outerDivTemplate, 2, 1, undefined, ['ngIf', '']); } { template(1, outerDivTemplate, 2, 1, 'div', ['ngIf', '']); }
elementEnd(); elementEnd();
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
@ -918,7 +918,7 @@ describe('@angular/common integration', () => {
function outerDivTemplate(rf: RenderFlags, ctx: any) { function outerDivTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
elementStart(0, 'div'); elementStart(0, 'div');
{ template(1, innerDivTemplate, 2, 1, undefined, ['ngIf', '']); } { template(1, innerDivTemplate, 2, 1, 'div', ['ngIf', '']); }
elementEnd(); elementEnd();
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
@ -971,8 +971,9 @@ describe('@angular/common integration', () => {
if (rf1 & RenderFlags.Create) { if (rf1 & RenderFlags.Create) {
text(0, 'from tpl'); text(0, 'from tpl');
} }
}, 1, 0, undefined, undefined, ['tpl', ''], templateRefExtractor); }, 1, 0, 'ng-template', undefined, ['tpl', ''], templateRefExtractor);
template(2, null, 0, 0, null, [AttributeMarker.SelectOnly, 'ngTemplateOutlet']); template(
2, null, 0, 0, 'ng-template', [AttributeMarker.SelectOnly, 'ngTemplateOutlet']);
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
const tplRef = load(1); const tplRef = load(1);
@ -1014,7 +1015,7 @@ describe('@angular/common integration', () => {
if (rf1 & RenderFlags.Create) { if (rf1 & RenderFlags.Create) {
text(0, 'from tpl'); text(0, 'from tpl');
} }
}, 1, 0, undefined, undefined, ['tpl', ''], templateRefExtractor); }, 1, 0, 'ng-template', undefined, ['tpl', ''], templateRefExtractor);
elementContainerStart(2, [AttributeMarker.SelectOnly, 'ngTemplateOutlet']); elementContainerStart(2, [AttributeMarker.SelectOnly, 'ngTemplateOutlet']);
elementContainerEnd(); elementContainerEnd();
} }

6
packages/core/test/render3/component_spec.ts
View File

@ -185,7 +185,7 @@ it('should not invoke renderer destroy method for embedded views', () => {
elementStart(0, 'div'); elementStart(0, 'div');
text(1, 'Root view'); text(1, 'Root view');
elementEnd(); elementEnd();
template(2, MyComponent_div_Template_2, 2, 0, null, [1, 'ngIf']); template(2, MyComponent_div_Template_2, 2, 0, null, [AttributeMarker.SelectOnly, 'ngIf']);
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
elementProperty(2, 'ngIf', bind(ctx.visible)); elementProperty(2, 'ngIf', bind(ctx.visible));
@ -511,8 +511,8 @@ describe('recursive components', () => {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
text(0); text(0);
template(1, IfTemplate, 1, 1, '', [AttributeMarker.SelectOnly, 'ngIf']); template(1, IfTemplate, 1, 1, 'ng-if-tree', [AttributeMarker.SelectOnly, 'ngIf']);
template(2, IfTemplate2, 1, 1, '', [AttributeMarker.SelectOnly, 'ngIf']); template(2, IfTemplate2, 1, 1, 'ng-if-tree', [AttributeMarker.SelectOnly, 'ngIf']);
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
textBinding(0, bind(ctx.data.value)); textBinding(0, bind(ctx.data.value));

4
packages/core/test/render3/content_spec.ts
View File

@ -813,7 +813,7 @@ describe('content projection', () => {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
projectionDef(); projectionDef();
text(0, 'Before-'); text(0, 'Before-');
template(1, IfTemplate, 1, 0, '', [AttributeMarker.SelectOnly, 'ngIf']); template(1, IfTemplate, 1, 0, 'ng-template', [AttributeMarker.SelectOnly, 'ngIf']);
text(2, '-After'); text(2, '-After');
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
@ -878,7 +878,7 @@ describe('content projection', () => {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
projectionDef(); projectionDef();
text(0, 'Before-'); text(0, 'Before-');
template(1, IfTemplate, 1, 0, '', [AttributeMarker.SelectOnly, 'ngIf']); template(1, IfTemplate, 1, 0, 'ng-template', [AttributeMarker.SelectOnly, 'ngIf']);
text(2, '-After'); text(2, '-After');
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {

20
packages/core/test/render3/di_spec.ts
View File

@ -489,7 +489,7 @@ describe('di', () => {
const App = createComponent('app', (rf: RenderFlags, ctx: any) => { const App = createComponent('app', (rf: RenderFlags, ctx: any) => {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
elementStart(0, 'div', ['dirB', '']); elementStart(0, 'div', ['dirB', '']);
{ template(1, IfTemplate, 4, 1, '', [AttributeMarker.SelectOnly, 'ngIf', '']); } { template(1, IfTemplate, 4, 1, 'div', [AttributeMarker.SelectOnly, 'ngIf', '']); }
elementEnd(); elementEnd();
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
@ -609,7 +609,10 @@ describe('di', () => {
const App = createComponent('app', (rf: RenderFlags, ctx: any) => { const App = createComponent('app', (rf: RenderFlags, ctx: any) => {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
elementStart(0, 'div', ['dirB', '', 'value', 'declaration']); elementStart(0, 'div', ['dirB', '', 'value', 'declaration']);
{ template(1, FooTemplate, 3, 1, '', null, ['foo', ''], templateRefExtractor); } {
template(
1, FooTemplate, 3, 1, 'ng-template', null, ['foo', ''], templateRefExtractor);
}
elementEnd(); elementEnd();
elementStart(3, 'div', ['dirB', '', 'value', 'insertion']); elementStart(3, 'div', ['dirB', '', 'value', 'insertion']);
{ element(4, 'div', ['structuralDir', '']); } { element(4, 'div', ['structuralDir', '']); }
@ -1157,7 +1160,7 @@ describe('di', () => {
const App = createComponent('app', function(rf: RenderFlags, ctx: any) { const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
elementStart(0, 'div', ['dirB', '']); elementStart(0, 'div', ['dirB', '']);
{ template(1, IfTemplate, 1, 0, '', ['ngIf', '']); } { template(1, IfTemplate, 1, 0, 'div', ['ngIf', '']); }
elementEnd(); elementEnd();
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
@ -1300,7 +1303,7 @@ describe('di', () => {
/** <ng-template dir></ng-template> */ /** <ng-template dir></ng-template> */
const App = createComponent('app', function(rf: RenderFlags, ctx: any) { const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template(0, () => {}, 0, 0, null, ['dir', '']); template(0, () => {}, 0, 0, 'ng-template', ['dir', '']);
lContainer = load(0) as any; lContainer = load(0) as any;
} }
}, 1, 0, [Directive]); }, 1, 0, [Directive]);
@ -1347,8 +1350,9 @@ describe('di', () => {
*/ */
const App = createComponent('app', function(rf: RenderFlags, ctx: any) { const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template(0, function() { template(
}, 0, 0, undefined, ['dir', '', 'dirSame', ''], ['dir', 'dir', 'dirSame', 'dirSame']); 0, function() {}, 0, 0, 'ng-template', ['dir', '', 'dirSame', ''],
['dir', 'dir', 'dirSame', 'dirSame']);
text(3); text(3);
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
@ -1703,7 +1707,7 @@ describe('di', () => {
/** <div *ngIf="showing" dir dirSameInstance #dir="dir"> {{ dir.value }} </div> */ /** <div *ngIf="showing" dir dirSameInstance #dir="dir"> {{ dir.value }} </div> */
template: function(rf: RenderFlags, ctx: MyApp) { template: function(rf: RenderFlags, ctx: MyApp) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template(0, C1, 3, 1, null, ['ngIf', 'showing']); template(0, C1, 3, 1, 'div', ['ngIf', 'showing']);
} }
}, },
directives: directives directives: directives
@ -1827,7 +1831,7 @@ describe('di', () => {
const MyApp = createComponent('my-app', function(rf: RenderFlags, ctx: any) { const MyApp = createComponent('my-app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template( template(
0, null, 0, 0, null, 0, null, 0, 0, 'ng-template',
['myDirective', 'initial', 'exist', 'existValue', 'other', 'ignore']); ['myDirective', 'initial', 'exist', 'existValue', 'other', 'ignore']);
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {

109
packages/core/test/render3/directive_spec.ts
View File

@ -6,13 +6,14 @@
* found in the LICENSE file at https://angular.io/license * found in the LICENSE file at https://angular.io/license
*/ */
import {EventEmitter} from '@angular/core'; import {EventEmitter, TemplateRef, ViewContainerRef} from '@angular/core';
import {AttributeMarker, RenderFlags, defineDirective} from '../../src/render3/index'; import {AttributeMarker, RenderFlags, defineComponent, defineDirective, directiveInject} from '../../src/render3/index';
import {bind, element, elementEnd, elementProperty, elementStart, listener, template, elementContainerStart, elementContainerEnd} from '../../src/render3/instructions'; import {bind, element, elementEnd, elementProperty, elementStart, listener, template, elementContainerStart, elementContainerEnd, text} from '../../src/render3/instructions';
import {ComponentFixture, TemplateFixture, createComponent} from './render_util'; import {ComponentFixture, TemplateFixture, createComponent} from './render_util';
import {NgIf} from './common_with_def';
describe('directive', () => { describe('directive', () => {
@ -121,6 +122,106 @@ describe('directive', () => {
expect(directiveInstance !.testValue).toBe(false); expect(directiveInstance !.testValue).toBe(false);
}); });
it('should match directives on <ng-template>', () => {
/**
* @Directive({
* selector: 'ng-template[directiveA]'
* })
* export class DirectiveA {
* constructor(public templateRef: TemplateRef<any>) {}
* }
*/
let tmplRef: any;
class DirectiveA {
constructor(public templateRef: any) { tmplRef = templateRef; }
static ngDirectiveDef = defineDirective({
type: DirectiveA,
selectors: [['ng-template', 'directiveA', '']],
factory: () => new DirectiveA(directiveInject(TemplateRef as any))
});
}
function MyComponent_ng_template_Template_0(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
text(0, 'Some content');
}
}
class MyComponent {
static ngComponentDef = defineComponent({
type: MyComponent,
selectors: [['my-component']],
factory: () => new MyComponent(),
consts: 1,
vars: 0,
// <ng-template directiveA>Some content</ng-template>
template: function MyComponent_Template(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
template(
0, MyComponent_ng_template_Template_0, 1, 0, 'ng-template', ['directiveA', '']);
}
},
directives: [DirectiveA]
});
}
new ComponentFixture(MyComponent);
expect(tmplRef instanceof TemplateRef).toBeTruthy();
});
it('should match directives on <ng-container>', () => {
/**
* @Directive({
* selector: 'ng-container[directiveA]'
* })
* export class DirectiveA {
* constructor(public vcRef: ViewContainerRef<any>) {}
* }
*/
let vcRef: any;
class DirectiveA {
constructor(public viewContainerRef: any) { vcRef = viewContainerRef; }
static ngDirectiveDef = defineDirective({
type: DirectiveA,
selectors: [['ng-container', 'directiveA', '']],
factory: () => new DirectiveA(directiveInject(ViewContainerRef as any))
});
}
function MyComponent_ng_container_Template_0(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementContainerStart(0, ['directiveA', '']);
text(1, 'Some content');
elementContainerEnd();
}
}
class MyComponent {
visible = true;
static ngComponentDef = defineComponent({
type: MyComponent,
selectors: [['my-component']],
factory: () => new MyComponent(),
consts: 1,
vars: 1,
// <ng-container *ngIf="visible" directiveA>Some content</ng-container>
template: function MyComponent_Template(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
template(
0, MyComponent_ng_container_Template_0, 2, 0, 'ng-container',
[AttributeMarker.SelectOnly, 'ngIf']);
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'ngIf', bind(ctx.visible));
}
},
directives: [DirectiveA, NgIf]
});
}
new ComponentFixture(MyComponent);
expect(vcRef instanceof ViewContainerRef).toBeTruthy();
});
it('should match directives with attribute selectors on outputs', () => { it('should match directives with attribute selectors on outputs', () => {
let directiveInstance: Directive; let directiveInstance: Directive;
@ -173,7 +274,7 @@ describe('directive', () => {
*/ */
const Cmpt = createComponent('Cmpt', function(rf: RenderFlags, ctx: {value: any}) { const Cmpt = createComponent('Cmpt', function(rf: RenderFlags, ctx: {value: any}) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template(0, null, 0, 0, null, [AttributeMarker.SelectOnly, 'out']); template(0, null, 0, 0, 'ng-template', [AttributeMarker.SelectOnly, 'out']);
listener('out', () => { ctx.value = true; }); listener('out', () => { ctx.value = true; });
} }
}, 1, 0, [Directive]); }, 1, 0, [Directive]);

2
packages/core/test/render3/discovery_utils_spec.ts
View File

@ -120,7 +120,7 @@ describe('discovery utils', () => {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
element(0, 'child'); element(0, 'child');
} }
}, 1, 0, null, ['ngIf', '']); }, 1, 0, 'child', ['ngIf', '']);
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
textBinding(1, bind(ctx.text)); textBinding(1, bind(ctx.text));

4
packages/core/test/render3/exports_spec.ts
View File

@ -365,7 +365,7 @@ describe('exports', () => {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
elementStart(0, 'input', ['value', 'one'], ['outerInput', '']); elementStart(0, 'input', ['value', 'one'], ['outerInput', '']);
elementEnd(); elementEnd();
template(2, outerTemplate, 5, 2, '', [AttributeMarker.SelectOnly, 'ngIf']); template(2, outerTemplate, 5, 2, 'div', [AttributeMarker.SelectOnly, 'ngIf']);
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
elementProperty(2, 'ngIf', bind(app.outer)); elementProperty(2, 'ngIf', bind(app.outer));
@ -379,7 +379,7 @@ describe('exports', () => {
text(1); text(1);
elementStart(2, 'input', ['value', 'two'], ['innerInput', '']); elementStart(2, 'input', ['value', 'two'], ['innerInput', '']);
elementEnd(); elementEnd();
template(4, innerTemplate, 2, 2, '', [AttributeMarker.SelectOnly, 'ngIf']); template(4, innerTemplate, 2, 2, 'div', [AttributeMarker.SelectOnly, 'ngIf']);
} }
elementEnd(); elementEnd();
} }

2
packages/core/test/render3/host_binding_spec.ts
View File

@ -472,7 +472,7 @@ describe('host bindings', () => {
*/ */
const App = createComponent('parent', (rf: RenderFlags, ctx: any) => { const App = createComponent('parent', (rf: RenderFlags, ctx: any) => {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template(0, NgForTemplate, 2, 0, null, ['ngForOf', '']); template(0, NgForTemplate, 2, 0, 'div', ['ngForOf', '']);
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
elementProperty(0, 'ngForOf', bind(ctx.rows)); elementProperty(0, 'ngForOf', bind(ctx.rows));

4
packages/core/test/render3/i18n_spec.ts
View File

@ -595,7 +595,7 @@ describe('Runtime i18n', () => {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
i18nStart(0, MSG_DIV, 1); i18nStart(0, MSG_DIV, 1);
elementStart(1, 'div'); elementStart(1, 'div');
template(2, subTemplate_2, 2, 0, null, ['ngIf', '']); template(2, subTemplate_2, 2, 0, 'span', ['ngIf', '']);
elementEnd(); elementEnd();
i18nEnd(); i18nEnd();
} }
@ -624,7 +624,7 @@ describe('Runtime i18n', () => {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
elementStart(0, 'div'); elementStart(0, 'div');
i18nStart(1, MSG_DIV); i18nStart(1, MSG_DIV);
template(2, subTemplate_1, 3, 1, null, ['ngIf', '']); template(2, subTemplate_1, 3, 1, 'div', ['ngIf', '']);
i18nEnd(); i18nEnd();
elementEnd(); elementEnd();
} }

4
packages/core/test/render3/instructions_spec.ts
View File

@ -297,7 +297,7 @@ describe('instructions', () => {
function ToDoAppComponent_NgForOf_Template_0(rf: RenderFlags, ctx0: NgForOfContext<any>) { function ToDoAppComponent_NgForOf_Template_0(rf: RenderFlags, ctx0: NgForOfContext<any>) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
elementStart(0, 'ul'); elementStart(0, 'ul');
template(1, ToDoAppComponent_NgForOf_NgForOf_Template_1, 2, 1, null, _c0); template(1, ToDoAppComponent_NgForOf_NgForOf_Template_1, 2, 1, 'li', _c0);
elementEnd(); elementEnd();
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
@ -335,7 +335,7 @@ describe('instructions', () => {
vars: 1, vars: 1,
template: function ToDoAppComponent_Template(rf: RenderFlags, ctx: NestedLoops) { template: function ToDoAppComponent_Template(rf: RenderFlags, ctx: NestedLoops) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template(0, ToDoAppComponent_NgForOf_Template_0, 2, 1, null, _c0); template(0, ToDoAppComponent_NgForOf_Template_0, 2, 1, 'ul', _c0);
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
elementProperty(0, 'ngForOf', bind(ctx.rows)); elementProperty(0, 'ngForOf', bind(ctx.rows));

19
packages/core/test/render3/integration_spec.ts
View File

@ -719,7 +719,8 @@ describe('render3 integration test', () => {
const TestCmpt = const TestCmpt =
createComponent('test-cmpt', function(rf: RenderFlags, ctx: {value: any}) { createComponent('test-cmpt', function(rf: RenderFlags, ctx: {value: any}) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template(0, ngIfTemplate, 2, 0, null, [AttributeMarker.SelectOnly, 'ngIf']); template(
0, ngIfTemplate, 2, 0, 'ng-template', [AttributeMarker.SelectOnly, 'ngIf']);
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
elementProperty(0, 'ngIf', bind(ctx.value)); elementProperty(0, 'ngIf', bind(ctx.value));
@ -778,7 +779,8 @@ describe('render3 integration test', () => {
const TestCmpt = createComponent('test-cmpt', function(rf: RenderFlags) { const TestCmpt = createComponent('test-cmpt', function(rf: RenderFlags) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template( template(
0, embeddedTemplate, 2, 0, null, [AttributeMarker.SelectOnly, 'testDirective']); 0, embeddedTemplate, 2, 0, 'ng-template',
[AttributeMarker.SelectOnly, 'testDirective']);
} }
}, 1, 0, [TestDirective]); }, 1, 0, [TestDirective]);
@ -893,7 +895,9 @@ describe('render3 integration test', () => {
*/ */
const TestCmpt = createComponent('test-cmpt', function(rf: RenderFlags) { const TestCmpt = createComponent('test-cmpt', function(rf: RenderFlags) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template(0, embeddedTemplate, 4, 0, null, [AttributeMarker.SelectOnly, 'testDirective']); template(
0, embeddedTemplate, 4, 0, 'ng-template',
[AttributeMarker.SelectOnly, 'testDirective']);
} }
}, 1, 0, [TestDirective]); }, 1, 0, [TestDirective]);
@ -981,7 +985,8 @@ describe('render3 integration test', () => {
const App = createComponent('app', function(rf: RenderFlags) { const App = createComponent('app', function(rf: RenderFlags) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
elementContainerStart(0, [AttributeMarker.SelectOnly, 'dir']); elementContainerStart(0, [AttributeMarker.SelectOnly, 'dir']);
template(1, ContentTemplate, 1, 0, '', null, ['content', ''], templateRefExtractor); template(
1, ContentTemplate, 1, 0, 'ng-template', null, ['content', ''], templateRefExtractor);
elementContainerEnd(); elementContainerEnd();
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
@ -1037,7 +1042,7 @@ describe('render3 integration test', () => {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
elementContainerStart(0); elementContainerStart(0);
template( template(
1, ContentTemplate, 1, 0, '', [AttributeMarker.SelectOnly, 'dir'], [], 1, ContentTemplate, 1, 0, 'ng-template', [AttributeMarker.SelectOnly, 'dir'], [],
templateRefExtractor); templateRefExtractor);
elementContainerEnd(); elementContainerEnd();
} }
@ -1610,7 +1615,7 @@ describe('render3 integration test', () => {
*/ */
const App = createComponent('app', function(rf: RenderFlags, ctx: any) { const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template(0, FooTemplate, 1, 0, '', null, ['foo', ''], templateRefExtractor); template(0, FooTemplate, 1, 0, 'ng-template', null, ['foo', ''], templateRefExtractor);
elementStart(2, 'structural-comp'); elementStart(2, 'structural-comp');
elementStyling(['active']); elementStyling(['active']);
elementEnd(); elementEnd();
@ -1990,7 +1995,7 @@ describe('render3 integration test', () => {
elementEnd(); elementEnd();
element(2, 'div'); element(2, 'div');
} }
}, 3, 0, null, ['ngIf', '']); }, 3, 0, 'ng-template', ['ngIf', '']);
elementEnd(); elementEnd();
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {

7
packages/core/test/render3/lifecycle_spec.ts
View File

@ -196,7 +196,7 @@ describe('lifecycles', () => {
/** <comp *ngIf="showing"></comp> */ /** <comp *ngIf="showing"></comp> */
const App = createComponent('app', function(rf: RenderFlags, ctx: any) { const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template(0, IfTemplate, 1, 0, '', ['ngIf', '']); template(0, IfTemplate, 1, 0, 'comp', ['ngIf', '']);
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
elementProperty(0, 'ngIf', bind(ctx.showing)); elementProperty(0, 'ngIf', bind(ctx.showing));
@ -2586,7 +2586,8 @@ describe('lifecycles', () => {
function conditionTpl(rf: RenderFlags, ctx: Cmpt) { function conditionTpl(rf: RenderFlags, ctx: Cmpt) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template(0, null, 0, 1, null, [AttributeMarker.SelectOnly, 'onDestroyDirective']); template(
0, null, 0, 1, 'ng-template', [AttributeMarker.SelectOnly, 'onDestroyDirective']);
} }
} }
@ -2597,7 +2598,7 @@ describe('lifecycles', () => {
*/ */
function cmptTpl(rf: RenderFlags, cmpt: Cmpt) { function cmptTpl(rf: RenderFlags, cmpt: Cmpt) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template(0, conditionTpl, 1, 1, null, [AttributeMarker.SelectOnly, 'ngIf']); template(0, conditionTpl, 1, 1, 'ng-template', [AttributeMarker.SelectOnly, 'ngIf']);
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
elementProperty(0, 'ngIf', bind(cmpt.showing)); elementProperty(0, 'ngIf', bind(cmpt.showing));

4
packages/core/test/render3/node_selector_matcher_spec.ts
View File

@ -20,7 +20,7 @@ function testLStaticData(tagName: string, attrs: TAttributes | null): TNode {
describe('css selector matching', () => { describe('css selector matching', () => {
function isMatching(tagName: string, attrs: TAttributes | null, selector: CssSelector): boolean { function isMatching(tagName: string, attrs: TAttributes | null, selector: CssSelector): boolean {
return isNodeMatchingSelector( return isNodeMatchingSelector(
createTNode(getLView(), TNodeType.Element, 0, tagName, attrs, null), selector); createTNode(getLView(), TNodeType.Element, 0, tagName, attrs, null), selector, false);
} }
describe('isNodeMatchingSimpleSelector', () => { describe('isNodeMatchingSimpleSelector', () => {
@ -417,7 +417,7 @@ describe('css selector matching', () => {
function isAnyMatching( function isAnyMatching(
tagName: string, attrs: string[] | null, selector: CssSelectorList): boolean { tagName: string, attrs: string[] | null, selector: CssSelectorList): boolean {
return isNodeMatchingSelectorList(testLStaticData(tagName, attrs), selector); return isNodeMatchingSelectorList(testLStaticData(tagName, attrs), selector, false);
} }
it('should match when there is only one simple selector without negations', () => { it('should match when there is only one simple selector without negations', () => {

2
packages/core/test/render3/pure_function_spec.ts
View File

@ -87,7 +87,7 @@ describe('array literals', () => {
*/ */
const App = createComponent('app', function(rf: RenderFlags, ctx: any) { const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template(0, IfTemplate, 1, 3, null, [AttributeMarker.SelectOnly, 'ngIf']); template(0, IfTemplate, 1, 3, 'my-comp', [AttributeMarker.SelectOnly, 'ngIf']);
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
elementProperty(0, 'ngIf', bind(ctx.showing)); elementProperty(0, 'ngIf', bind(ctx.showing));

49
packages/core/test/render3/query_spec.ts
View File

@ -661,7 +661,7 @@ describe('query', () => {
'cmpt', 'cmpt',
function(rf: RenderFlags, ctx: any) { function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template(1, null, 0, 0, null, null, ['foo', '']); template(1, null, 0, 0, 'ng-template', null, ['foo', '']);
} }
}, },
3, 0, [], [], 3, 0, [], [],
@ -693,7 +693,7 @@ describe('query', () => {
'cmpt', 'cmpt',
function(rf: RenderFlags, ctx: any) { function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template(1, null, 0, 0, null, null, ['foo', '']); template(1, null, 0, 0, 'ng-template', null, ['foo', '']);
} }
}, },
3, 0, [], [], 3, 0, [], [],
@ -728,7 +728,7 @@ describe('query', () => {
'cmpt', 'cmpt',
function(rf: RenderFlags, ctx: any) { function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template(1, null, 0, 0, null, null, ['foo', '']); template(1, null, 0, 0, 'ng-template', null, ['foo', '']);
} }
}, },
3, 0, [], [], 3, 0, [], [],
@ -760,7 +760,7 @@ describe('query', () => {
'cmpt', 'cmpt',
function(rf: RenderFlags, ctx: any) { function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template(1, null, 0, 0, null, null, ['foo', '']); template(1, null, 0, 0, 'ng-template', null, ['foo', '']);
} }
}, },
3, 0, [], [], 3, 0, [], [],
@ -1276,9 +1276,15 @@ describe('query', () => {
'cmpt', 'cmpt',
function(rf: RenderFlags, ctx: any) { function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template(2, Cmpt_Template_1, 2, 0, null, null, ['foo', ''], templateRefExtractor); template(
template(3, Cmpt_Template_1, 2, 0, null, null, ['bar', ''], templateRefExtractor); 2, Cmpt_Template_1, 2, 0, 'ng-template', null, ['foo', ''],
template(4, Cmpt_Template_1, 2, 0, null, null, ['baz', ''], templateRefExtractor); templateRefExtractor);
template(
3, Cmpt_Template_1, 2, 0, 'ng-template', null, ['bar', ''],
templateRefExtractor);
template(
4, Cmpt_Template_1, 2, 0, 'ng-template', null, ['baz', ''],
templateRefExtractor);
} }
}, },
5, 0, [], [], 5, 0, [], [],
@ -1361,7 +1367,7 @@ describe('query', () => {
'cmpt', 'cmpt',
function(rf: RenderFlags, ctx: any) { function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template(1, Cmpt_Template_1, 2, 0, null, ['ngIf', '']); template(1, Cmpt_Template_1, 2, 0, 'ng-template', ['ngIf', '']);
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
elementProperty(1, 'ngIf', bind(ctx.value)); elementProperty(1, 'ngIf', bind(ctx.value));
@ -1422,7 +1428,7 @@ describe('query', () => {
vars: 1, vars: 1,
template: function(rf: RenderFlags, ctx: any) { template: function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template(1, Cmpt_Template_1, 2, 1, null, ['ngForOf', '']); template(1, Cmpt_Template_1, 2, 1, 'ng-template', ['ngForOf', '']);
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
elementProperty(1, 'ngForOf', bind(ctx.value)); elementProperty(1, 'ngForOf', bind(ctx.value));
@ -1501,11 +1507,13 @@ describe('query', () => {
function(rf: RenderFlags, ctx: any) { function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template( template(
1, Cmpt_Template_1, 2, 1, null, null, ['tpl1', ''], templateRefExtractor); 1, Cmpt_Template_1, 2, 1, 'ng-template', null, ['tpl1', ''],
templateRefExtractor);
element(3, 'div', ['id', 'middle'], ['foo', '']); element(3, 'div', ['id', 'middle'], ['foo', '']);
template( template(
5, Cmpt_Template_5, 2, 1, null, null, ['tpl2', ''], templateRefExtractor); 5, Cmpt_Template_5, 2, 1, 'ng-template', null, ['tpl2', ''],
template(7, null, 0, 0, null, [AttributeMarker.SelectOnly, 'vc']); templateRefExtractor);
template(7, null, 0, 0, 'ng-template', [AttributeMarker.SelectOnly, 'vc']);
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
@ -1599,9 +1607,11 @@ describe('query', () => {
template: function(rf: RenderFlags, ctx: any) { template: function(rf: RenderFlags, ctx: any) {
let tmp: any; let tmp: any;
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template(1, Cmpt_Template_1, 2, 1, null, [], ['tpl', ''], templateRefExtractor); template(
template(3, null, 0, 0, null, [AttributeMarker.SelectOnly, 'vc']); 1, Cmpt_Template_1, 2, 1, 'ng-template', [], ['tpl', ''],
template(4, null, 0, 0, null, [AttributeMarker.SelectOnly, 'vc']); templateRefExtractor);
template(3, null, 0, 0, 'ng-template', [AttributeMarker.SelectOnly, 'vc']);
template(4, null, 0, 0, 'ng-template', [AttributeMarker.SelectOnly, 'vc']);
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
@ -1671,9 +1681,10 @@ describe('query', () => {
template: (rf: RenderFlags, myApp: MyApp) => { template: (rf: RenderFlags, myApp: MyApp) => {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template( template(
1, MyApp_Template_1, 2, 0, undefined, undefined, ['tpl', ''], 1, MyApp_Template_1, 2, 0, 'ng-template', undefined, ['tpl', ''],
templateRefExtractor); templateRefExtractor);
template(3, null, 0, 0, null, [AttributeMarker.SelectOnly, 'ngTemplateOutlet']); template(
3, null, 0, 0, 'ng-template', [AttributeMarker.SelectOnly, 'ngTemplateOutlet']);
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
const tplRef = reference(2); const tplRef = reference(2);
@ -2195,7 +2206,7 @@ describe('query', () => {
function(rf: RenderFlags, ctx: any) { function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template( template(
1, AppComponent_Template_1, 1, 0, null, [AttributeMarker.SelectOnly, 'someDir']); 1, AppComponent_Template_1, 1, 0, 'div', [AttributeMarker.SelectOnly, 'someDir']);
element(2, 'div', null, ['foo', '']); element(2, 'div', null, ['foo', '']);
} }
}, },
@ -2377,7 +2388,7 @@ describe('query', () => {
const AppComponent = createComponent('app-component', function(rf: RenderFlags, ctx: any) { const AppComponent = createComponent('app-component', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
elementStart(0, 'shallow-comp'); elementStart(0, 'shallow-comp');
{ template(1, IfTemplate, 2, 0, null, [AttributeMarker.SelectOnly, 'ngIf', '']); } { template(1, IfTemplate, 2, 0, 'div', [AttributeMarker.SelectOnly, 'ngIf', '']); }
elementEnd(); elementEnd();
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {

10
packages/core/test/render3/template_ref_spec.ts
View File

@ -50,7 +50,7 @@ describe('TemplateRef', () => {
*/ */
const AppComponent = createComponent('app-cmp', function(rf: RenderFlags, ctx: any) { const AppComponent = createComponent('app-cmp', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template(0, embeddedTemplate, 3, 0, null, ['tplRef', '']); template(0, embeddedTemplate, 3, 0, 'ng-template', ['tplRef', '']);
directiveWithTplRef = getDirectiveOnNode(0, 0); directiveWithTplRef = getDirectiveOnNode(0, 0);
} }
}, 1, 0, [DirectiveWithTplRef]); }, 1, 0, [DirectiveWithTplRef]);
@ -79,7 +79,7 @@ describe('TemplateRef', () => {
*/ */
const AppComponent = createComponent('app-cmp', function(rf: RenderFlags, ctx: any) { const AppComponent = createComponent('app-cmp', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template(0, () => {}, 0, 0, null, ['tplRef', '']); template(0, () => {}, 0, 0, 'ng-template', ['tplRef', '']);
directiveWithTplRef = getDirectiveOnNode(0, 0); directiveWithTplRef = getDirectiveOnNode(0, 0);
} }
}, 1, 0, [DirectiveWithTplRef]); }, 1, 0, [DirectiveWithTplRef]);
@ -108,7 +108,7 @@ describe('TemplateRef', () => {
function embeddedTemplate(rf: RenderFlags, ctx: any) { function embeddedTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template(0, ngIfTemplate, 1, 0, null, [AttributeMarker.SelectOnly, 'ngIf']); template(0, ngIfTemplate, 1, 0, 'ng-template', [AttributeMarker.SelectOnly, 'ngIf']);
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
elementProperty(0, 'ngIf', bind(ctx.showing)); elementProperty(0, 'ngIf', bind(ctx.showing));
@ -120,7 +120,7 @@ describe('TemplateRef', () => {
*/ */
const AppComponent = createComponent('app-cmp', function(rf: RenderFlags, ctx: any) { const AppComponent = createComponent('app-cmp', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template(0, embeddedTemplate, 1, 1, null, ['tplRef', '']); template(0, embeddedTemplate, 1, 1, 'ng-template', ['tplRef', '']);
directiveWithTplRef = getDirectiveOnNode(0, 0); directiveWithTplRef = getDirectiveOnNode(0, 0);
} }
}, 1, 0, [DirectiveWithTplRef, NgIf]); }, 1, 0, [DirectiveWithTplRef, NgIf]);
@ -158,7 +158,7 @@ describe('TemplateRef', () => {
*/ */
const AppComponent = createComponent('app-cmp', function(rf: RenderFlags, ctx: any) { const AppComponent = createComponent('app-cmp', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template(0, embeddedTemplate, 2, 0, null, ['tplRef', '']); template(0, embeddedTemplate, 2, 0, 'ng-template', ['tplRef', '']);
directiveWithTplRef = getDirectiveOnNode(0, 0); directiveWithTplRef = getDirectiveOnNode(0, 0);
} }
}, 1, 0, [DirectiveWithTplRef]); }, 1, 0, [DirectiveWithTplRef]);

57
packages/core/test/render3/view_container_ref_spec.ts
View File

@ -75,7 +75,8 @@ describe('ViewContainerRef', () => {
* <p vcref [tplRef]="tplRef"></p> * <p vcref [tplRef]="tplRef"></p>
*/ */
function createTemplate() { function createTemplate() {
template(0, embeddedTemplate, 1, 1, null, null, ['tplRef', ''], templateRefExtractor); template(
0, embeddedTemplate, 1, 1, 'ng-template', null, ['tplRef', ''], templateRefExtractor);
element(2, 'p', ['vcref', '']); element(2, 'p', ['vcref', '']);
} }
@ -92,7 +93,8 @@ describe('ViewContainerRef', () => {
* <footer></footer> * <footer></footer>
*/ */
function createTemplate() { function createTemplate() {
template(0, embeddedTemplate, 1, 1, null, null, ['tplRef', ''], templateRefExtractor); template(
0, embeddedTemplate, 1, 1, 'ng-template', null, ['tplRef', ''], templateRefExtractor);
element(2, 'header', ['vcref', '']); element(2, 'header', ['vcref', '']);
element(3, 'footer'); element(3, 'footer');
} }
@ -128,7 +130,8 @@ describe('ViewContainerRef', () => {
* <footer></footer> * <footer></footer>
*/ */
function createTemplate() { function createTemplate() {
template(0, embeddedTemplate, 1, 1, null, [], ['tplRef', ''], templateRefExtractor); template(
0, embeddedTemplate, 1, 1, 'ng-template', [], ['tplRef', ''], templateRefExtractor);
element(2, 'header-cmp', ['vcref', '']); element(2, 'header-cmp', ['vcref', '']);
element(3, 'footer'); element(3, 'footer');
} }
@ -164,7 +167,8 @@ describe('ViewContainerRef', () => {
* <div vcref [tplRef]="tplRef"></div> * <div vcref [tplRef]="tplRef"></div>
*/ */
function createTemplate() { function createTemplate() {
template(0, embeddedTemplate, 1, 1, null, null, ['tplRef', ''], templateRefExtractor); template(
0, embeddedTemplate, 1, 1, 'ng-template', null, ['tplRef', ''], templateRefExtractor);
element(2, 'div', ['vcref', '']); element(2, 'div', ['vcref', '']);
element(3, 'div', ['vcref', '']); element(3, 'div', ['vcref', '']);
@ -195,7 +199,8 @@ describe('ViewContainerRef', () => {
*/ */
function createTemplate() { function createTemplate() {
template( template(
0, embeddedTemplate, 1, 1, null, ['vcref', ''], ['tplRef', ''], templateRefExtractor); 0, embeddedTemplate, 1, 1, 'ng-template', ['vcref', ''], ['tplRef', ''],
templateRefExtractor);
element(2, 'footer'); element(2, 'footer');
} }
@ -281,8 +286,8 @@ describe('ViewContainerRef', () => {
template: (rf: RenderFlags, cmp: TestComponent) => { template: (rf: RenderFlags, cmp: TestComponent) => {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
text(0, 'before|'); text(0, 'before|');
template(1, EmbeddedTemplateA, 1, 0, null, ['testdir', '']); template(1, EmbeddedTemplateA, 1, 0, 'ng-template', ['testdir', '']);
template(2, EmbeddedTemplateB, 1, 0, null, ['testdir', '']); template(2, EmbeddedTemplateB, 1, 0, 'ng-template', ['testdir', '']);
text(3, '|after'); text(3, '|after');
} }
}, },
@ -354,7 +359,7 @@ describe('ViewContainerRef', () => {
template: (rf: RenderFlags, cmp: TestComponent) => { template: (rf: RenderFlags, cmp: TestComponent) => {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
text(0, 'before|'); text(0, 'before|');
template(1, EmbeddedTemplateA, 1, 0, null, ['testdir', '']); template(1, EmbeddedTemplateA, 1, 0, 'ng-template', ['testdir', '']);
container(2); container(2);
text(3, '|after'); text(3, '|after');
} }
@ -466,7 +471,8 @@ describe('ViewContainerRef', () => {
template: (rf: RenderFlags, cmp: SomeComponent) => { template: (rf: RenderFlags, cmp: SomeComponent) => {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template( template(
0, SomeComponent_Template_0, 2, 3, null, [], ['foo', ''], templateRefExtractor); 0, SomeComponent_Template_0, 2, 3, 'ng-template', [], ['foo', ''],
templateRefExtractor);
pipe(2, 'starPipe'); pipe(2, 'starPipe');
element(3, 'child', ['vcref', '']); element(3, 'child', ['vcref', '']);
pipe(4, 'starPipe'); pipe(4, 'starPipe');
@ -557,7 +563,8 @@ describe('ViewContainerRef', () => {
*/ */
const Parent = createComponent('parent', function(rf: RenderFlags, parent: any) { const Parent = createComponent('parent', function(rf: RenderFlags, parent: any) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template(0, fooTemplate, 2, 1, null, null, ['foo', ''], templateRefExtractor); template(
0, fooTemplate, 2, 1, 'ng-template', null, ['foo', ''], templateRefExtractor);
element(2, 'child'); element(2, 'child');
} }
@ -618,7 +625,7 @@ describe('ViewContainerRef', () => {
vars: 2, vars: 2,
template: function(rf: RenderFlags, loop: any) { template: function(rf: RenderFlags, loop: any) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template(0, null, 0, 0, null, [AttributeMarker.SelectOnly, 'ngForOf']); template(0, null, 0, 0, 'ng-template', [AttributeMarker.SelectOnly, 'ngForOf']);
} }
if (rf & RenderFlags.Update) { if (rf & RenderFlags.Update) {
@ -648,7 +655,9 @@ describe('ViewContainerRef', () => {
*/ */
const Parent = createComponent('parent', function(rf: RenderFlags, parent: any) { const Parent = createComponent('parent', function(rf: RenderFlags, parent: any) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template(0, rowTemplate, 3, 2, null, null, ['rowTemplate', ''], templateRefExtractor); template(
0, rowTemplate, 3, 2, 'ng-template', null, ['rowTemplate', ''],
templateRefExtractor);
element(2, 'loop-comp'); element(2, 'loop-comp');
} }
@ -662,7 +671,9 @@ describe('ViewContainerRef', () => {
function rowTemplate(rf: RenderFlags, ctx: any) { function rowTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template(0, cellTemplate, 2, 3, null, null, ['cellTemplate', ''], templateRefExtractor); template(
0, cellTemplate, 2, 3, 'ng-template', null, ['cellTemplate', ''],
templateRefExtractor);
element(2, 'loop-comp'); element(2, 'loop-comp');
} }
@ -1247,7 +1258,7 @@ describe('ViewContainerRef', () => {
it('should work on templates', () => { it('should work on templates', () => {
function createTemplate() { function createTemplate() {
template(0, embeddedTemplate, 1, 1, null, ['vcref', '']); template(0, embeddedTemplate, 1, 1, 'ng-template', ['vcref', '']);
element(1, 'footer'); element(1, 'footer');
} }
@ -1312,7 +1323,9 @@ describe('ViewContainerRef', () => {
vars: 2, vars: 2,
template: (rf: RenderFlags, cmp: Parent) => { template: (rf: RenderFlags, cmp: Parent) => {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template(0, embeddedTemplate, 2, 1, null, null, ['foo', ''], templateRefExtractor); template(
0, embeddedTemplate, 2, 1, 'ng-template', null, ['foo', ''],
templateRefExtractor);
elementStart(2, 'child'); elementStart(2, 'child');
{ {
elementStart(3, 'header', ['vcref', '']); elementStart(3, 'header', ['vcref', '']);
@ -1407,7 +1420,8 @@ describe('ViewContainerRef', () => {
template: (rf: RenderFlags, cmp: Parent) => { template: (rf: RenderFlags, cmp: Parent) => {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template( template(
0, embeddedTemplate, 2, 1, null, undefined, ['foo', ''], templateRefExtractor); 0, embeddedTemplate, 2, 1, 'ng-template', undefined, ['foo', ''],
templateRefExtractor);
elementStart(2, 'child-with-view'); elementStart(2, 'child-with-view');
text(3, 'Before projected'); text(3, 'Before projected');
elementStart(4, 'header', ['vcref', '']); elementStart(4, 'header', ['vcref', '']);
@ -1491,7 +1505,8 @@ describe('ViewContainerRef', () => {
let tplRef: any; let tplRef: any;
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template( template(
0, embeddedTemplate, 2, 1, null, null, ['foo', ''], templateRefExtractor); 0, embeddedTemplate, 2, 1, 'ng-template', null, ['foo', ''],
templateRefExtractor);
elementStart(2, 'child-with-selector'); elementStart(2, 'child-with-selector');
elementStart(3, 'header', ['vcref', '']); elementStart(3, 'header', ['vcref', '']);
text(4, 'blah'); text(4, 'blah');
@ -1544,7 +1559,8 @@ describe('ViewContainerRef', () => {
let tplRef: any; let tplRef: any;
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template( template(
0, embeddedTemplate, 2, 1, null, null, ['foo', ''], templateRefExtractor); 0, embeddedTemplate, 2, 1, 'ng-template', null, ['foo', ''],
templateRefExtractor);
elementStart(2, 'child-with-selector'); elementStart(2, 'child-with-selector');
elementStart(3, 'footer', ['vcref', '']); elementStart(3, 'footer', ['vcref', '']);
text(4, 'blah'); text(4, 'blah');
@ -1649,7 +1665,8 @@ describe('ViewContainerRef', () => {
template: (rf: RenderFlags, cmp: SomeComponent) => { template: (rf: RenderFlags, cmp: SomeComponent) => {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template( template(
0, SomeComponent_Template_0, 1, 1, null, [], ['foo', ''], templateRefExtractor); 0, SomeComponent_Template_0, 1, 1, 'ng-template', [], ['foo', ''],
templateRefExtractor);
element(2, 'hooks', ['vcref', '']); element(2, 'hooks', ['vcref', '']);
element(3, 'hooks'); element(3, 'hooks');
} }
@ -1864,7 +1881,7 @@ describe('ViewContainerRef', () => {
vars: 0, vars: 0,
template: (rf: RenderFlags, cmp: AppCmpt) => { template: (rf: RenderFlags, cmp: AppCmpt) => {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
template(0, null, 0, 0, null, ['vcref', '']); template(0, null, 0, 0, 'ng-template', ['vcref', '']);
} }
}, },
directives: [HostBindingCmpt, DirectiveWithVCRef] directives: [HostBindingCmpt, DirectiveWithVCRef]