fix(ivy): add bound proerties name to template (#25272)
Before this change bound properties would not be used when matching directives at runtime. That is `<ng-template [ngIf]=cond>...</ng-template>` would not trigger the `ngIf` directive. PR Close #25272
This commit is contained in:
Victor Berchet
Kara Erickson
parent
2f4abbf5a1
commit
728d98d3a9
|
|
@ -6,7 +6,7 @@
|
|||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {MockDirectory, setup} from '@angular/compiler/test/aot/test_util';
|
||||
import {setup} from '@angular/compiler/test/aot/test_util';
|
||||
import {compile, expectEmit} from './mock_compile';
|
||||
|
||||
describe('compiler compliance: template', () => {
|
||||
|
|
@ -53,7 +53,7 @@ describe('compiler compliance: template', () => {
|
|||
const template = `
|
||||
const $c0$ = ["ngFor","","ngForOf",""];
|
||||
function MyComponent_ul_li_div_Template_1(rf, ctx) {
|
||||
|
||||
|
||||
if (rf & 1) {
|
||||
const $s$ = $i0$.ɵgV();
|
||||
$i0$.ɵE(0, "div");
|
||||
|
|
@ -68,7 +68,7 @@ describe('compiler compliance: template', () => {
|
|||
$i0$.ɵT(1);
|
||||
$i0$.ɵe();
|
||||
}
|
||||
|
||||
|
||||
if (rf & 2) {
|
||||
const $inner1$ = ctx.$implicit;
|
||||
const $middle1$ = $i0$.ɵx().$implicit;
|
||||
|
|
@ -78,7 +78,7 @@ describe('compiler compliance: template', () => {
|
|||
$i0$.ɵt(1, $i0$.ɵi1(" ", $myComp1$.format($outer1$, $middle1$, $inner1$, $myComp1$.component), " "));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function MyComponent_ul_li_Template_1(rf, ctx) {
|
||||
if (rf & 1) {
|
||||
$i0$.ɵE(0, "li");
|
||||
|
|
@ -90,7 +90,7 @@ describe('compiler compliance: template', () => {
|
|||
$i0$.ɵp(1, "ngForOf", $i0$.ɵb($myComp2$.items));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function MyComponent_ul_Template_0(rf, ctx) {
|
||||
if (rf & 1) {
|
||||
$i0$.ɵE(0, "ul");
|
||||
|
|
@ -140,8 +140,8 @@ describe('compiler compliance: template', () => {
|
|||
};
|
||||
|
||||
const template = `
|
||||
const $c0$ = ["ngFor","","ngForOf",""];
|
||||
|
||||
const $c0$ = ["ngFor", "", "ngForOf", ""];
|
||||
|
||||
function MyComponent_span_Template_0(rf, ctx) {
|
||||
if (rf & 1) {
|
||||
$i0$.ɵE(0, "span");
|
||||
|
|
@ -194,9 +194,9 @@ describe('compiler compliance: template', () => {
|
|||
};
|
||||
|
||||
const template = `
|
||||
const $c0$ = ["ngFor","","ngForOf",""];
|
||||
const $c1$ = ["ngIf",""];
|
||||
|
||||
const $c0$ = ["ngFor", "", "ngForOf", ""];
|
||||
const $c1$ = ["ngIf", ""];
|
||||
|
||||
function MyComponent_div_span_Template_1(rf, ctx) {
|
||||
if (rf & 1) {
|
||||
$i0$.ɵE(0, "span");
|
||||
|
|
@ -210,7 +210,7 @@ describe('compiler compliance: template', () => {
|
|||
$i0$.ɵt(1, $i0$.ɵi2(" ", $i$, " - ", $item$, " "));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function MyComponent_div_Template_0(rf, ctx) {
|
||||
if (rf & 1) {
|
||||
$i0$.ɵE(0, "div");
|
||||
|
|
@ -222,7 +222,7 @@ describe('compiler compliance: template', () => {
|
|||
$i0$.ɵp(1, "ngIf", $i0$.ɵb($app$.showing));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ...
|
||||
template:function MyComponent_Template(rf, ctx){
|
||||
if (rf & 1) {
|
||||
|
|
@ -266,7 +266,7 @@ describe('compiler compliance: template', () => {
|
|||
|
||||
// The template should look like this (where IDENT is a wild card for an identifier):
|
||||
const template = `
|
||||
const $c0$ = ["ngFor","","ngForOf",""];
|
||||
const $c0$ = ["ngFor", "", "ngForOf", ""];
|
||||
function MyComponent_div_div_div_Template_1(rf, ctx) {
|
||||
if (rf & 1) {
|
||||
$i0$.ɵE(0, "div");
|
||||
|
|
@ -279,7 +279,7 @@ describe('compiler compliance: template', () => {
|
|||
$i0$.ɵt(1, $i0$.ɵi2(" ", $middle$.value, " - ", $myComp$.name, " "));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function MyComponent_div_div_Template_1(rf, ctx) {
|
||||
if (rf & 1) {
|
||||
$i0$.ɵE(0, "div");
|
||||
|
|
@ -291,7 +291,7 @@ describe('compiler compliance: template', () => {
|
|||
$i0$.ɵp(1, "ngForOf", $i0$.ɵb($middle$.items));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function MyComponent_div_Template_0(rf, ctx) {
|
||||
if (rf & 1) {
|
||||
$i0$.ɵE(0, "div");
|
||||
|
|
@ -318,4 +318,50 @@ describe('compiler compliance: template', () => {
|
|||
expectEmit(result.source, template, 'Incorrect template');
|
||||
});
|
||||
|
||||
it('should support <ng-template>', () => {
|
||||
const files = {
|
||||
app: {
|
||||
'spec.ts': `
|
||||
import {Component, NgModule} from '@angular/core';
|
||||
import {CommonModule} from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'my-component',
|
||||
template: \`
|
||||
<ng-template [boundAttr]="b" attr="l">
|
||||
some-content
|
||||
</ng-template>\`
|
||||
})
|
||||
export class MyComponent {}
|
||||
|
||||
@NgModule({declarations: [MyComponent], imports: [CommonModule]})
|
||||
export class MyModule {}
|
||||
`
|
||||
}
|
||||
};
|
||||
|
||||
const template = `
|
||||
const $c0$ = ["attr", "", "boundAttr", ""];
|
||||
|
||||
function Template_0(rf, ctx) {
|
||||
if (rf & 1) {
|
||||
$i0$.ɵT(0, " some-content ");
|
||||
}
|
||||
}
|
||||
|
||||
// ...
|
||||
|
||||
template: function MyComponent_Template(rf, ctx) {
|
||||
if (rf & 1) {
|
||||
$i0$.ɵC(0, Template_0, null, $c0$);
|
||||
}
|
||||
if (rf & 2) {
|
||||
$i0$.ɵp(0, "boundAttr", $i0$.ɵb(ctx.b));
|
||||
}
|
||||
}`;
|
||||
|
||||
const result = compile(files, angularFiles);
|
||||
|
||||
expectEmit(result.source, template, 'Incorrect template');
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
*/
|
||||
|
||||
import {flatten, sanitizeIdentifier} from '../../compile_metadata';
|
||||
import {CompileReflector} from '../../compile_reflector';
|
||||
import {BindingForm, BuiltinFunctionCall, LocalResolver, convertActionBinding, convertPropertyBinding} from '../../compiler_util/expression_converter';
|
||||
import {ConstantPool} from '../../constant_pool';
|
||||
import * as core from '../../core';
|
||||
|
|
@ -24,14 +23,14 @@ import {ParseError, ParseSourceSpan} from '../../parse_util';
|
|||
import {DomElementSchemaRegistry} from '../../schema/dom_element_schema_registry';
|
||||
import {CssSelector, SelectorMatcher} from '../../selector';
|
||||
import {BindingParser} from '../../template_parser/binding_parser';
|
||||
import {OutputContext, error} from '../../util';
|
||||
import {error} from '../../util';
|
||||
import * as t from '../r3_ast';
|
||||
import {Identifiers as R3} from '../r3_identifiers';
|
||||
import {htmlAstToRender3Ast} from '../r3_template_transform';
|
||||
|
||||
import {R3QueryMetadata} from './api';
|
||||
import {parseStyle} from './styling';
|
||||
import {CONTEXT_NAME, I18N_ATTR, I18N_ATTR_PREFIX, ID_SEPARATOR, IMPLICIT_REFERENCE, MEANING_SEPARATOR, REFERENCE_PREFIX, RENDER_FLAGS, TEMPORARY_NAME, asLiteral, getQueryPredicate, invalid, mapToExpression, noop, temporaryAllocator, trimTrailingNulls, unsupported} from './util';
|
||||
import {CONTEXT_NAME, I18N_ATTR, I18N_ATTR_PREFIX, ID_SEPARATOR, IMPLICIT_REFERENCE, MEANING_SEPARATOR, REFERENCE_PREFIX, RENDER_FLAGS, asLiteral, invalid, mapToExpression, trimTrailingNulls, unsupported} from './util';
|
||||
|
||||
function mapBindingToInstruction(type: BindingType): o.ExternalReference|undefined {
|
||||
switch (type) {
|
||||
|
|
@ -699,6 +698,7 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
|
|||
o.TYPED_NULL_EXPR,
|
||||
];
|
||||
|
||||
// Match directives on both attributes and bound properties
|
||||
const attributeNames: o.Expression[] = [];
|
||||
const attributeMap: {[name: string]: string} = {};
|
||||
|
||||
|
|
@ -707,7 +707,11 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
|
|||
attributeMap[a.name] = a.value;
|
||||
});
|
||||
|
||||
// Match directives on template attributes
|
||||
template.inputs.forEach(i => {
|
||||
attributeNames.push(asLiteral(i.name), asLiteral(''));
|
||||
attributeMap[i.name] = '';
|
||||
});
|
||||
|
||||
if (this.directiveMatcher) {
|
||||
const selector = createCssSelector('ng-template', attributeMap);
|
||||
this.directiveMatcher.match(
|
||||
|
|
|
|||
Loading…
Reference in New Issue