)
parameters.push(this.prepareRefsParameter(element.references));
@@ -690,31 +685,15 @@ export class TemplateDefinitionBuilder implements t.Visitor
, LocalResolver
o.TYPED_NULL_EXPR,
];
- // Match directives on both attributes and bound properties
- const attributeNames: o.Expression[] = [];
- const attributeMap: {[name: string]: string} = {};
+ // find directives matching on a given node
+ this.matchDirectives('ng-template', template);
- template.attributes.forEach(a => {
- attributeNames.push(asLiteral(a.name), asLiteral(''));
- attributeMap[a.name] = a.value;
- });
-
- 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(
- selector, (cssSelector, staticType) => { this.directives.add(staticType); });
- }
-
- if (attributeNames.length) {
- parameters.push(this.constantPool.getConstLiteral(o.literalArr(attributeNames), true));
- } else {
- parameters.push(o.TYPED_NULL_EXPR);
- }
+ // prepare attributes parameter (including attributes used for directive matching)
+ const attrsExprs: o.Expression[] = [];
+ template.attributes.forEach(
+ (a: t.TextAttribute) => { attrsExprs.push(asLiteral(a.name), asLiteral(a.value)); });
+ attrsExprs.push(...this.prepareSelectOnlyAttrs(template.inputs, template.outputs));
+ parameters.push(this.toAttrsParam(attrsExprs));
// local refs (ex.: )
if (template.references && template.references.length) {
@@ -722,7 +701,7 @@ export class TemplateDefinitionBuilder implements t.Visitor, LocalResolver
parameters.push(o.importExpr(R3.templateRefExtractor));
}
- // e.g. p(1, 'forOf', ɵbind(ctx.items));
+ // handle property bindings e.g. p(1, 'forOf', ɵbind(ctx.items));
const context = o.variable(CONTEXT_NAME);
template.inputs.forEach(input => {
const value = input.value.visit(this._valueConverter);
@@ -859,6 +838,47 @@ export class TemplateDefinitionBuilder implements t.Visitor, LocalResolver
o.importExpr(R3.bind).callFn([valExpr]);
}
+ private matchDirectives(tagName: string, elOrTpl: t.Element|t.Template) {
+ if (this.directiveMatcher) {
+ const selector = createCssSelector(tagName, this.getAttrsForDirectiveMatching(elOrTpl));
+ this.directiveMatcher.match(
+ selector, (cssSelector, staticType) => { this.directives.add(staticType); });
+ }
+ }
+
+ private getAttrsForDirectiveMatching(elOrTpl: t.Element|t.Template): {[name: string]: string} {
+ const attributesMap: {[name: string]: string} = {};
+
+ elOrTpl.attributes.forEach(a => {
+ if (!isI18NAttribute(a.name)) {
+ attributesMap[a.name] = a.value;
+ }
+ });
+ elOrTpl.inputs.forEach(i => { attributesMap[i.name] = ''; });
+ elOrTpl.outputs.forEach(o => { attributesMap[o.name] = ''; });
+
+ return attributesMap;
+ }
+
+ private prepareSelectOnlyAttrs(inputs: t.BoundAttribute[], outputs: t.BoundEvent[]):
+ o.Expression[] {
+ const attrExprs: o.Expression[] = [];
+
+ if (inputs.length || outputs.length) {
+ attrExprs.push(o.literal(core.AttributeMarker.SelectOnly));
+ inputs.forEach((i: t.BoundAttribute) => { attrExprs.push(asLiteral(i.name)); });
+ outputs.forEach((o: t.BoundEvent) => { attrExprs.push(asLiteral(o.name)); });
+ }
+
+ return attrExprs;
+ }
+
+ private toAttrsParam(attrsExprs: o.Expression[]): o.Expression {
+ return attrsExprs.length > 0 ?
+ this.constantPool.getConstLiteral(o.literalArr(attrsExprs), true) :
+ o.TYPED_NULL_EXPR;
+ }
+
private prepareRefsParameter(references: t.Reference[]): o.Expression {
if (!references || references.length === 0) {
return o.TYPED_NULL_EXPR;
diff --git a/packages/compiler/src/render3/view/util.ts b/packages/compiler/src/render3/view/util.ts
index 20e548515a..c5462e90c7 100644
--- a/packages/compiler/src/render3/view/util.ts
+++ b/packages/compiler/src/render3/view/util.ts
@@ -64,6 +64,10 @@ export function invalid(arg: o.Expression | o.Statement | t.Node): never {
`Invalid state: Visitor ${this.constructor.name} doesn't handle ${o.constructor.name}`);
}
+export function isI18NAttribute(name: string): boolean {
+ return name === I18N_ATTR || name.startsWith(I18N_ATTR_PREFIX);
+}
+
export function asLiteral(value: any): o.Expression {
if (Array.isArray(value)) {
return o.literalArr(value.map(asLiteral));
diff --git a/packages/core/src/render3/STATUS.md b/packages/core/src/render3/STATUS.md
index f3d1550331..50cb4bffea 100644
--- a/packages/core/src/render3/STATUS.md
+++ b/packages/core/src/render3/STATUS.md
@@ -157,9 +157,9 @@ The goal is for the `@Component` (and friends) to be the compiler of template. S
| `` | ❌ | ❌ | ❌ |
| `
` | ❌ | ❌ | ❌ |
| `
` | ❌ | ❌ | ❌ |
-| [`
`][gh23560] | ✅ | ❌ | ❌ |
+| [`
`][gh23560] | ✅ | ✅ | ✅ |
| [`
`][gh23561] | ❌ | ❌ | ❌ |
-| [``][gh24381] | ❌ | ❌ | ❌ |
+| [``][gh24381] | ✅ | ✅ | ✅ |
[gh23560]: https://github.com/angular/angular/issues/23560
[gh23561]: https://github.com/angular/angular/issues/23561
diff --git a/packages/core/src/render3/jit/directive.ts b/packages/core/src/render3/jit/directive.ts
index e756c47002..cd7c5e35b5 100644
--- a/packages/core/src/render3/jit/directive.ts
+++ b/packages/core/src/render3/jit/directive.ts
@@ -85,8 +85,8 @@ export function compileComponent(type: Type, metadata: Component): void {
// If component compilation is async, then the @NgModule annotation which declares the
// component may execute and set an ngSelectorScope property on the component type. This
- // allows the component to patch itself with directiveDefs from the module after it finishes
- // compiling.
+ // allows the component to patch itself with directiveDefs from the module after it
+ // finishes compiling.
if (hasSelectorScope(type)) {
const scopes = transitiveScopesFor(type.ngSelectorScope);
patchComponentDefWithScope(ngComponentDef, scopes);
diff --git a/packages/core/test/bundling/todo/bundle.golden_symbols.json b/packages/core/test/bundling/todo/bundle.golden_symbols.json
index 6f3ddfd2f7..2f1cc03898 100644
--- a/packages/core/test/bundling/todo/bundle.golden_symbols.json
+++ b/packages/core/test/bundling/todo/bundle.golden_symbols.json
@@ -257,6 +257,15 @@
{
"name": "_c2"
},
+ {
+ "name": "_c20"
+ },
+ {
+ "name": "_c21"
+ },
+ {
+ "name": "_c22"
+ },
{
"name": "_c3"
},
diff --git a/packages/core/test/bundling/todo_r2/bundle.golden_symbols.json b/packages/core/test/bundling/todo_r2/bundle.golden_symbols.json
index 1a4e32d3f5..ceb4d8a9df 100644
--- a/packages/core/test/bundling/todo_r2/bundle.golden_symbols.json
+++ b/packages/core/test/bundling/todo_r2/bundle.golden_symbols.json
@@ -1019,6 +1019,15 @@
{
"name": "_c2"
},
+ {
+ "name": "_c20"
+ },
+ {
+ "name": "_c21"
+ },
+ {
+ "name": "_c22"
+ },
{
"name": "_c3"
},