cargdev/angular
1
0
Fork 0
Code Issues 11 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ivy): provide support for map-based host bindings for [style] and [class] (#28246)

Browse Source 
Up until now, `[style]` and `[class]` bindings (the map-based ones) have only
worked as template bindings and have not been supported at all inside of host
bindings. This patch ensures that multiple host binding sources (components and
directives) all properly assign style values and merge them correctly in terms
of priority.

Jira: FW-882

PR Close #28246
This commit is contained in:
Matias Niemelä
2019-02-08 15:03:54 -08:00
committed by Miško Hevery
parent e5861e1c79
commit fe8301c462
16 changed files with 3104 additions and 1714 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
packages/compiler/src/render3/view/compiler.ts
View File

@ -39,8 +39,8 @@ const EMPTY_ARRAY: any[] = [];
// If there is a match, the first matching group will contain the attribute name to bind.
const ATTR_REGEX = /attr\.([^\]]+)/;
function getStylingPrefix(propName: string): string {
return propName.substring(0, 5).toLowerCase();
function getStylingPrefix(name: string): string {
return name.substring(0, 5); // style or class
}
function baseDirectiveFields(
@ -672,14 +672,9 @@ function createHostBindingsFunction(
const bindings = bindingParser.createBoundHostProperties(directiveSummary, hostBindingSourceSpan);
(bindings || []).forEach((binding: ParsedProperty) => {
const name = binding.name;
const stylePrefix = getStylingPrefix(name);
if (stylePrefix === 'style') {
const {propertyName, unit} = parseNamedProperty(name);
styleBuilder.registerStyleInput(propertyName, binding.expression, unit, binding.sourceSpan);
} else if (stylePrefix === 'class') {
styleBuilder.registerClassInput(
parseNamedProperty(name).propertyName, binding.expression, binding.sourceSpan);
} else {
const stylingInputWasSet =
styleBuilder.registerInputBasedOnName(name, binding.expression, binding.sourceSpan);
if (!stylingInputWasSet) {
// resolve literal arrays and literal objects
const value = binding.expression.visit(getValueConverter());
const bindingExpr = bindingFn(bindingContext, value);
@ -923,19 +918,3 @@ function compileStyles(styles: string[], selector: string, hostSelector: string)
const shadowCss = new ShadowCss();
return styles.map(style => { return shadowCss !.shimCssText(style, selector, hostSelector); });
}
function parseNamedProperty(name: string): {propertyName: string, unit: string} {
let unit = '';
let propertyName = '';
const index = name.indexOf('.');
if (index > 0) {
const unitIndex = name.lastIndexOf('.');
if (unitIndex !== index) {
unit = name.substring(unitIndex + 1, name.length);
propertyName = name.substring(index + 1, unitIndex);
} else {
propertyName = name.substring(index + 1, name.length);
}
}
return {propertyName, unit};
}