mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
8c7e93bebe
CHANGES: - Remove unused `onDestroy` method on the `KeyValueDiffer` and `IterableDiffer`. DEPRECATION: - `CollectionChangeRecord` is renamed to `IterableChangeRecord`. `CollectionChangeRecord` is aliased to `IterableChangeRecord` and is marked as `@deprecated`. It will be removed in `v5.x.x`. - Deprecate `DefaultIterableDiffer` as it is private class which was erroneously exposed. - Deprecate `KeyValueDiffers#factories` as it is private field which was erroneously exposed. - Deprecate `IterableDiffers#factories` as it is private field which was erroneously exposed. BREAKING CHANGE: - `IterableChangeRecord` is now an interface and parameterized on `<V>`. This should not be an issue unless your code does `new IterableChangeRecord` which it should not have a reason to do. - `KeyValueChangeRecord` is now an interface and parameterized on `<V>`. This should not be an issue unless your code does `new IterableChangeRecord` which it should not have a reason to do. Original PR #12570 Fixes #13382
70 lines
2.2 KiB
TypeScript
70 lines
2.2 KiB
TypeScript
/**
|
|
* @license
|
|
* Copyright Google Inc. All Rights Reserved.
|
|
*
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
* found in the LICENSE file at https://angular.io/license
|
|
*/
|
|
|
|
import {Directive, DoCheck, ElementRef, Input, KeyValueChanges, KeyValueDiffer, KeyValueDiffers, Renderer} from '@angular/core';
|
|
|
|
/**
|
|
* @ngModule CommonModule
|
|
*
|
|
* @whatItDoes Update an HTML element styles.
|
|
*
|
|
* @howToUse
|
|
* ```
|
|
* <some-element [ngStyle]="{'font-style': styleExp}">...</some-element>
|
|
*
|
|
* <some-element [ngStyle]="{'max-width.px': widthExp}">...</some-element>
|
|
*
|
|
* <some-element [ngStyle]="objExp">...</some-element>
|
|
* ```
|
|
*
|
|
* @description
|
|
*
|
|
* The styles are updated according to the value of the expression evaluation:
|
|
* - keys are style names with an optional `.<unit>` suffix (ie 'top.px', 'font-style.em'),
|
|
* - values are the values assigned to those properties (expressed in the given unit).
|
|
*
|
|
* @stable
|
|
*/
|
|
@Directive({selector: '[ngStyle]'})
|
|
export class NgStyle implements DoCheck {
|
|
private _ngStyle: {[key: string]: string};
|
|
private _differ: KeyValueDiffer<string, string|number>;
|
|
|
|
constructor(
|
|
private _differs: KeyValueDiffers, private _ngEl: ElementRef, private _renderer: Renderer) {}
|
|
|
|
@Input()
|
|
set ngStyle(v: {[key: string]: string}) {
|
|
this._ngStyle = v;
|
|
if (!this._differ && v) {
|
|
this._differ = this._differs.find(v).create(null);
|
|
}
|
|
}
|
|
|
|
ngDoCheck() {
|
|
if (this._differ) {
|
|
const changes = this._differ.diff(this._ngStyle);
|
|
if (changes) {
|
|
this._applyChanges(changes);
|
|
}
|
|
}
|
|
}
|
|
|
|
private _applyChanges(changes: KeyValueChanges<string, string|number>): void {
|
|
changes.forEachRemovedItem((record) => this._setStyle(record.key, null));
|
|
changes.forEachAddedItem((record) => this._setStyle(record.key, record.currentValue));
|
|
changes.forEachChangedItem((record) => this._setStyle(record.key, record.currentValue));
|
|
}
|
|
|
|
private _setStyle(nameAndUnit: string, value: string|number): void {
|
|
const [name, unit] = nameAndUnit.split('.');
|
|
value = value != null && unit ? `${value}${unit}` : value;
|
|
|
|
this._renderer.setElementStyle(this._ngEl.nativeElement, name, value as string);
|
|
}
|
|
}
|