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

fix(core): treat [class] and [className] as unrelated bindings (#35668)

Browse Source 
Before this change `[class]` and `[className]` were both converted into `ɵɵclassMap`. The implication of this is that at runtime we could not differentiate between the two and as a result we treated `@Input('class')` and `@Input('className)` as equivalent.

This change makes `[class]` and `[className]` distinct. The implication of this is that `[class]` becomes `ɵɵclassMap` instruction but  `[className]` becomes `ɵɵproperty' instruction. This means that `[className]` will no longer participate in styling and will overwrite the DOM `class` value.

Fix #35577

PR Close #35668
This commit is contained in:
Miško Hevery
2020-02-25 10:31:01 -08:00
committed by atscott
parent a4e956a7cf
commit a153b61098
4 changed files with 44 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/core/src/render3/instructions/property.ts
View File

@ -53,6 +53,5 @@ export function setDirectiveInputsWhichShadowsStyling(
const inputs = tNode.inputs !;
const property = isClassBased ? 'class' : 'style';
// We support both 'class' and `className` hence the fallback.
const stylingInputs = inputs[property] || (isClassBased && inputs['className']);
setInputsForProperty(tView, lView, stylingInputs, property, value);
setInputsForProperty(tView, lView, inputs[property], property, value);
}

2
packages/core/src/render3/instructions/shared.ts
View File

@ -907,7 +907,7 @@ function initializeInputAndOutputAliases(tView: TView, tNode: TNode): void {
}
if (inputsStore !== null) {
if (inputsStore.hasOwnProperty('class') || inputsStore.hasOwnProperty('className')) {
if (inputsStore.hasOwnProperty('class')) {
tNode.flags |= TNodeFlags.hasClassInput;
}
if (inputsStore.hasOwnProperty('style')) {