iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(ivy): convert [ngStyle] and [ngClass] to use ivy styling bindings (#28711) 

Prior to this fix, both the `NgStyle` and `NgClass` directives made use
of `Renderer2` and this dependency raised issues for future versions of
Angular that cannot inject it. This patch ensures that there are two
versions of both directives: one for the VE and another for Ivy.

Jira Issue: FW-882

PR Close #28711
This commit is contained in:
Matias Niemelä 2019-02-18 16:12:42 -08:00 committed by Igor Minar
parent d0e81eb593
commit cfb2d176f8
15 changed files with 921 additions and 228 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
integration/_payload-limits.json
View File

@ -21,7 +21,7 @@
"master": {
"uncompressed": {
"runtime": 1440,
"main": 194626,
"main": 207765,
"polyfills": 38390
}
}

7
packages/common/src/common.ts
View File

@ -19,10 +19,15 @@ export {registerLocaleData} from './i18n/locale_data';
export {Plural, NumberFormatStyle, FormStyle, Time, TranslationWidth, FormatWidth, NumberSymbol, WeekDay, getNumberOfCurrencyDigits, getCurrencySymbol, getLocaleDayPeriods, getLocaleDayNames, getLocaleMonthNames, getLocaleId, getLocaleEraNames, getLocaleWeekEndRange, getLocaleFirstDayOfWeek, getLocaleDateFormat, getLocaleDateTimeFormat, getLocaleExtraDayPeriodRules, getLocaleExtraDayPeriods, getLocalePluralCase, getLocaleTimeFormat, getLocaleNumberSymbol, getLocaleNumberFormat, getLocaleCurrencyName, getLocaleCurrencySymbol} from './i18n/locale_data_api';
export {parseCookieValue as ɵparseCookieValue} from './cookie';
export {CommonModule, DeprecatedI18NPipesModule} from './common_module';
export {NgClass, NgForOf, NgForOfContext, NgIf, NgIfContext, NgPlural, NgPluralCase, NgStyle, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet, NgComponentOutlet} from './directives/index';
export {NgClass, NgClassBase, NgForOf, NgForOfContext, NgIf, NgIfContext, NgPlural, NgPluralCase, NgStyle, NgStyleBase, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet, NgComponentOutlet} from './directives/index';
export {DOCUMENT} from './dom_tokens';
export {AsyncPipe, DatePipe, I18nPluralPipe, I18nSelectPipe, JsonPipe, LowerCasePipe, CurrencyPipe, DecimalPipe, PercentPipe, SlicePipe, UpperCasePipe, TitleCasePipe, KeyValuePipe, KeyValue} from './pipes/index';
export {DeprecatedDatePipe, DeprecatedCurrencyPipe, DeprecatedDecimalPipe, DeprecatedPercentPipe} from './pipes/deprecated/index';
export {PLATFORM_BROWSER_ID as ɵPLATFORM_BROWSER_ID, PLATFORM_SERVER_ID as ɵPLATFORM_SERVER_ID, PLATFORM_WORKER_APP_ID as ɵPLATFORM_WORKER_APP_ID, PLATFORM_WORKER_UI_ID as ɵPLATFORM_WORKER_UI_ID, isPlatformBrowser, isPlatformServer, isPlatformWorkerApp, isPlatformWorkerUi} from './platform_id';
export {VERSION} from './version';
export {ViewportScroller, NullViewportScroller as ɵNullViewportScroller} from './viewport_scroller';
export {NgClassImplProvider__POST_R3__ as ɵNgClassImplProvider__POST_R3__, NgClassR2Impl as ɵNgClassR2Impl, NgClassImpl as ɵNgClassImpl} from './directives/ng_class_impl';
export {NgStyleImplProvider__POST_R3__ as ɵNgStyleImplProvider__POST_R3__, NgStyleR2Impl as ɵNgStyleR2Impl, NgStyleImpl as ɵNgStyleImpl} from './directives/ng_style_impl';
export {ngStyleDirectiveDef__POST_R3__ as ɵngStyleDirectiveDef__POST_R3__} from './directives/ng_style';
export {ngClassDirectiveDef__POST_R3__ as ɵngClassDirectiveDef__POST_R3__} from './directives/ng_class';

9
packages/common/src/directives/index.ts
View File

@ -7,18 +7,18 @@
*/
import {Provider} from '@angular/core';
import {NgClass} from './ng_class';
import {NgClass, NgClassBase} from './ng_class';
import {NgComponentOutlet} from './ng_component_outlet';
import {NgForOf, NgForOfContext} from './ng_for_of';
import {NgIf, NgIfContext} from './ng_if';
import {NgPlural, NgPluralCase} from './ng_plural';
import {NgStyle} from './ng_style';
import {NgStyle, NgStyleBase} from './ng_style';
import {NgSwitch, NgSwitchCase, NgSwitchDefault} from './ng_switch';
import {NgTemplateOutlet} from './ng_template_outlet';
export {
NgClass,
NgClassBase,
NgComponentOutlet,
NgForOf,
NgForOfContext,
@ -27,10 +27,11 @@ export {
NgPlural,
NgPluralCase,
NgStyle,
NgStyleBase,
NgSwitch,
NgSwitchCase,
NgSwitchDefault,
NgTemplateOutlet
NgTemplateOutlet,
};

185
packages/common/src/directives/ng_class.ts
View File

@ -5,8 +5,68 @@
* 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, Input, ɵRenderFlags, ɵdefineDirective, ɵelementStyling, ɵelementStylingApply, ɵelementStylingMap} from '@angular/core';
import {Directive, DoCheck, ElementRef, Input, IterableChanges, IterableDiffer, IterableDiffers, KeyValueChanges, KeyValueDiffer, KeyValueDiffers, Renderer2, ɵisListLikeIterable as isListLikeIterable, ɵstringify as stringify} from '@angular/core';
import {NgClassImpl, NgClassImplProvider} from './ng_class_impl';
/*
* NgClass (as well as NgStyle) behaves differently when loaded in the VE and when not.
*
* If the VE is present (which is for older versions of Angular) then NgClass will inject
* the legacy diffing algorithm as a service and delegate all styling changes to that.
*
* If the VE is not present then NgStyle will normalize (through the injected service) and
* then write all styling changes to the `[style]` binding directly (through a host binding).
* Then Angular will notice the host binding change and treat the changes as styling
* changes and apply them via the core styling instructions that exist within Angular.
*/
// used when the VE is present
export const ngClassDirectiveDef__PRE_R3__ = undefined;
// used when the VE is not present (note the directive will
// never be instantiated normally because it is apart of a
// base class)
export const ngClassDirectiveDef__POST_R3__ = ɵdefineDirective({
type: function() {} as any,
selectors: null as any,
factory: () => {},
hostBindings: function(rf: ɵRenderFlags, ctx: any, elIndex: number) {
if (rf & ɵRenderFlags.Create) {
ɵelementStyling(null, null, null, ctx);
}
if (rf & ɵRenderFlags.Update) {
ɵelementStylingMap(elIndex, ctx.getValue(), null, ctx);
ɵelementStylingApply(elIndex, ctx);
}
}
});
export const ngClassDirectiveDef = ngClassDirectiveDef__PRE_R3__;
/**
* Serves as the base non-VE container for NgClass.
*
* While this is a base class that NgClass extends from, the
* class itself acts as a container for non-VE code to setup
* a link to the `[class]` host binding (via the static
* `ngDirectiveDef` property on the class).
*
* Note that the `ngDirectiveDef` property's code is switched
* depending if VE is present or not (this allows for the
* binding code to be set only for newer versions of Angular).
*
* @publicApi
*/
export class NgClassBase {
static ngDirectiveDef: any = ngClassDirectiveDef;
constructor(protected _delegate: NgClassImpl) {}
getValue() { return this._delegate.getValue(); }
}
/**
* @ngModule CommonModule
@ -36,126 +96,17 @@ import {Directive, DoCheck, ElementRef, Input, IterableChanges, IterableDiffer,
*
* @publicApi
*/
@Directive({selector: '[ngClass]'})
export class NgClass implements DoCheck {
// TODO(issue/24571): remove '!'.
private _iterableDiffer !: IterableDiffer<string>| null;
// TODO(issue/24571): remove '!'.
private _keyValueDiffer !: KeyValueDiffer<string, any>| null;
private _initialClasses: string[] = [];
// TODO(issue/24571): remove '!'.
private _rawClass !: string[] | Set<string>| {[klass: string]: any};
constructor(
private _iterableDiffers: IterableDiffers, private _keyValueDiffers: KeyValueDiffers,
private _ngEl: ElementRef, private _renderer: Renderer2) {}
@Directive({selector: '[ngClass]', providers: [NgClassImplProvider]})
export class NgClass extends NgClassBase implements DoCheck {
constructor(delegate: NgClassImpl) { super(delegate); }
@Input('class')
set klass(value: string) {
this._removeClasses(this._initialClasses);
this._initialClasses = typeof value === 'string' ? value.split(/\s+/) : [];
this._applyClasses(this._initialClasses);
this._applyClasses(this._rawClass);
}
set klass(value: string) { this._delegate.setClass(value); }
@Input()
@Input('ngClass')
set ngClass(value: string|string[]|Set<string>|{[klass: string]: any}) {
this._removeClasses(this._rawClass);
this._applyClasses(this._initialClasses);
this._iterableDiffer = null;
this._keyValueDiffer = null;
this._rawClass = typeof value === 'string' ? value.split(/\s+/) : value;
if (this._rawClass) {
if (isListLikeIterable(this._rawClass)) {
this._iterableDiffer = this._iterableDiffers.find(this._rawClass).create();
} else {
this._keyValueDiffer = this._keyValueDiffers.find(this._rawClass).create();
}
}
this._delegate.setNgClass(value);
}
ngDoCheck(): void {
if (this._iterableDiffer) {
const iterableChanges = this._iterableDiffer.diff(this._rawClass as string[]);
if (iterableChanges) {
this._applyIterableChanges(iterableChanges);
}
} else if (this._keyValueDiffer) {
const keyValueChanges = this._keyValueDiffer.diff(this._rawClass as{[k: string]: any});
if (keyValueChanges) {
this._applyKeyValueChanges(keyValueChanges);
}
}
}
private _applyKeyValueChanges(changes: KeyValueChanges<string, any>): void {
changes.forEachAddedItem((record) => this._toggleClass(record.key, record.currentValue));
changes.forEachChangedItem((record) => this._toggleClass(record.key, record.currentValue));
changes.forEachRemovedItem((record) => {
if (record.previousValue) {
this._toggleClass(record.key, false);
}
});
}
private _applyIterableChanges(changes: IterableChanges<string>): void {
changes.forEachAddedItem((record) => {
if (typeof record.item === 'string') {
this._toggleClass(record.item, true);
} else {
throw new Error(
`NgClass can only toggle CSS classes expressed as strings, got ${stringify(record.item)}`);
}
});
changes.forEachRemovedItem((record) => this._toggleClass(record.item, false));
}
/**
* Applies a collection of CSS classes to the DOM element.
*
* For argument of type Set and Array CSS class names contained in those collections are always
* added.
* For argument of type Map CSS class name in the map's key is toggled based on the value (added
* for truthy and removed for falsy).
*/
private _applyClasses(rawClassVal: string[]|Set<string>|{[klass: string]: any}) {
if (rawClassVal) {
if (Array.isArray(rawClassVal) || rawClassVal instanceof Set) {
(<any>rawClassVal).forEach((klass: string) => this._toggleClass(klass, true));
} else {
Object.keys(rawClassVal).forEach(klass => this._toggleClass(klass, !!rawClassVal[klass]));
}
}
}
/**
* Removes a collection of CSS classes from the DOM element. This is mostly useful for cleanup
* purposes.
*/
private _removeClasses(rawClassVal: string[]|Set<string>|{[klass: string]: any}) {
if (rawClassVal) {
if (Array.isArray(rawClassVal) || rawClassVal instanceof Set) {
(<any>rawClassVal).forEach((klass: string) => this._toggleClass(klass, false));
} else {
Object.keys(rawClassVal).forEach(klass => this._toggleClass(klass, false));
}
}
}
private _toggleClass(klass: string, enabled: boolean): void {
klass = klass.trim();
if (klass) {
klass.split(/\s+/g).forEach(klass => {
if (enabled) {
this._renderer.addClass(this._ngEl.nativeElement, klass);
} else {
this._renderer.removeClass(this._ngEl.nativeElement, klass);
}
});
}
}
ngDoCheck() { this._delegate.applyChanges(); }
}

208
packages/common/src/directives/ng_class_impl.ts Normal file
View File

@ -0,0 +1,208 @@
/**
* @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 {ElementRef, Injectable, IterableChanges, IterableDiffer, IterableDiffers, KeyValueChanges, KeyValueDiffer, KeyValueDiffers, Renderer2, ɵisListLikeIterable as isListLikeIterable, ɵstringify as stringify} from '@angular/core';
import {StylingDiffer, StylingDifferOptions} from './styling_differ';
/**
* Used as a token for an injected service within the NgClass directive.
*
* NgClass behaves differenly whether or not VE is being used or not. If
* present then the legacy ngClass diffing algorithm will be used as an
* injected service. Otherwise the new diffing algorithm (which delegates
* to the `[class]` binding) will be used. This toggle behavior is done so
* via the ivy_switch mechanism.
*/
export abstract class NgClassImpl {
abstract setClass(value: string): void;
abstract setNgClass(value: string|string[]|Set<string>|{[klass: string]: any}): void;
abstract applyChanges(): void;
abstract getValue(): {[key: string]: any}|null;
}
@Injectable()
export class NgClassR2Impl implements NgClassImpl {
// TODO(issue/24571): remove '!'.
private _iterableDiffer !: IterableDiffer<string>| null;
// TODO(issue/24571): remove '!'.
private _keyValueDiffer !: KeyValueDiffer<string, any>| null;
private _initialClasses: string[] = [];
// TODO(issue/24571): remove '!'.
private _rawClass !: string[] | Set<string>| {[klass: string]: any};
constructor(
private _iterableDiffers: IterableDiffers, private _keyValueDiffers: KeyValueDiffers,
private _ngEl: ElementRef, private _renderer: Renderer2) {}
getValue() { return null; }
setClass(value: string) {
this._removeClasses(this._initialClasses);
this._initialClasses = typeof value === 'string' ? value.split(/\s+/) : [];
this._applyClasses(this._initialClasses);
this._applyClasses(this._rawClass);
}
setNgClass(value: string) {
this._removeClasses(this._rawClass);
this._applyClasses(this._initialClasses);
this._iterableDiffer = null;
this._keyValueDiffer = null;
this._rawClass = typeof value === 'string' ? value.split(/\s+/) : value;
if (this._rawClass) {
if (isListLikeIterable(this._rawClass)) {
this._iterableDiffer = this._iterableDiffers.find(this._rawClass).create();
} else {
this._keyValueDiffer = this._keyValueDiffers.find(this._rawClass).create();
}
}
}
applyChanges() {
if (this._iterableDiffer) {
const iterableChanges = this._iterableDiffer.diff(this._rawClass as string[]);
if (iterableChanges) {
this._applyIterableChanges(iterableChanges);
}
} else if (this._keyValueDiffer) {
const keyValueChanges = this._keyValueDiffer.diff(this._rawClass as{[k: string]: any});
if (keyValueChanges) {
this._applyKeyValueChanges(keyValueChanges);
}
}
}
private _applyKeyValueChanges(changes: KeyValueChanges<string, any>): void {
changes.forEachAddedItem((record) => this._toggleClass(record.key, record.currentValue));
changes.forEachChangedItem((record) => this._toggleClass(record.key, record.currentValue));
changes.forEachRemovedItem((record) => {
if (record.previousValue) {
this._toggleClass(record.key, false);
}
});
}
private _applyIterableChanges(changes: IterableChanges<string>): void {
changes.forEachAddedItem((record) => {
if (typeof record.item === 'string') {
this._toggleClass(record.item, true);
} else {
throw new Error(
`NgClass can only toggle CSS classes expressed as strings, got ${stringify(record.item)}`);
}
});
changes.forEachRemovedItem((record) => this._toggleClass(record.item, false));
}
/**
* Applies a collection of CSS classes to the DOM element.
*
* For argument of type Set and Array CSS class names contained in those collections are always
* added.
* For argument of type Map CSS class name in the map's key is toggled based on the value (added
* for truthy and removed for falsy).
*/
private _applyClasses(rawClassVal: string[]|Set<string>|{[klass: string]: any}) {
if (rawClassVal) {
if (Array.isArray(rawClassVal) || rawClassVal instanceof Set) {
(<any>rawClassVal).forEach((klass: string) => this._toggleClass(klass, true));
} else {
Object.keys(rawClassVal).forEach(klass => this._toggleClass(klass, !!rawClassVal[klass]));
}
}
}
/**
* Removes a collection of CSS classes from the DOM element. This is mostly useful for cleanup
* purposes.
*/
private _removeClasses(rawClassVal: string[]|Set<string>|{[klass: string]: any}) {
if (rawClassVal) {
if (Array.isArray(rawClassVal) || rawClassVal instanceof Set) {
(<any>rawClassVal).forEach((klass: string) => this._toggleClass(klass, false));
} else {
Object.keys(rawClassVal).forEach(klass => this._toggleClass(klass, false));
}
}
}
private _toggleClass(klass: string, enabled: boolean): void {
klass = klass.trim();
if (klass) {
klass.split(/\s+/g).forEach(klass => {
if (enabled) {
this._renderer.addClass(this._ngEl.nativeElement, klass);
} else {
this._renderer.removeClass(this._ngEl.nativeElement, klass);
}
});
}
}
}
@Injectable()
export class NgClassR3Impl implements NgClassImpl {
private _value: {[key: string]: boolean}|null = null;
private _ngClassDiffer = new StylingDiffer<{[key: string]: boolean}|null>(
'NgClass', StylingDifferOptions.TrimProperties|
StylingDifferOptions.AllowSubKeys|
StylingDifferOptions.AllowStringValue|StylingDifferOptions.ForceAsMap);
private _classStringDiffer: StylingDiffer<{[key: string]: boolean}>|null = null;
getValue() { return this._value; }
setClass(value: string) {
// early exit incase the binding gets emitted as an empty value which
// means there is no reason to instantiate and diff the values...
if (!value && !this._classStringDiffer) return;
this._classStringDiffer = this._classStringDiffer ||
new StylingDiffer('class',
StylingDifferOptions.AllowStringValue | StylingDifferOptions.ForceAsMap);
this._classStringDiffer.setValue(value);
}
setNgClass(value: string|string[]|Set<string>|{[klass: string]: any}) {
this._ngClassDiffer.setValue(value);
}
applyChanges() {
const classChanged =
this._classStringDiffer ? this._classStringDiffer.hasValueChanged() : false;
const ngClassChanged = this._ngClassDiffer.hasValueChanged();
if (classChanged || ngClassChanged) {
let value = this._ngClassDiffer.value;
if (this._classStringDiffer) {
let classValue = this._classStringDiffer.value;
if (classValue) {
value = value ? {...classValue, ...value} : classValue;
}
}
this._value = value;
}
}
}
// the implementation for both NgStyleR2Impl and NgStyleR3Impl are
// not ivy_switch'd away, instead they are only hooked up into the
// DI via NgStyle's directive's provider property.
export const NgClassImplProvider__PRE_R3__ = {
provide: NgClassImpl,
useClass: NgClassR2Impl
};
export const NgClassImplProvider__POST_R3__ = {
provide: NgClassImpl,
useClass: NgClassR3Impl
};
export const NgClassImplProvider = NgClassImplProvider__PRE_R3__;

120
packages/common/src/directives/ng_style.ts
View File

@ -5,8 +5,68 @@
* 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, Input, ɵRenderFlags, ɵdefineDirective, ɵelementStyling, ɵelementStylingApply, ɵelementStylingMap} from '@angular/core';
import {Directive, DoCheck, ElementRef, Input, KeyValueChanges, KeyValueDiffer, KeyValueDiffers, Renderer2} from '@angular/core';
import {NgStyleImpl, NgStyleImplProvider} from './ng_style_impl';
/*
* NgStyle (as well as NgClass) behaves differently when loaded in the VE and when not.
*
* If the VE is present (which is for older versions of Angular) then NgStyle will inject
* the legacy diffing algorithm as a service and delegate all styling changes to that.
*
* If the VE is not present then NgStyle will normalize (through the injected service) and
* then write all styling changes to the `[style]` binding directly (through a host binding).
* Then Angular will notice the host binding change and treat the changes as styling
* changes and apply them via the core styling instructions that exist within Angular.
*/
// used when the VE is present
export const ngStyleDirectiveDef__PRE_R3__ = undefined;
// used when the VE is not present (note the directive will
// never be instantiated normally because it is apart of a
// base class)
export const ngStyleDirectiveDef__POST_R3__ = ɵdefineDirective({
type: function() {} as any,
selectors: null as any,
factory: () => {},
hostBindings: function(rf: ɵRenderFlags, ctx: any, elIndex: number) {
if (rf & ɵRenderFlags.Create) {
ɵelementStyling(null, null, null, ctx);
}
if (rf & ɵRenderFlags.Update) {
ɵelementStylingMap(elIndex, null, ctx.getValue(), ctx);
ɵelementStylingApply(elIndex, ctx);
}
}
});
export const ngStyleDirectiveDef = ngStyleDirectiveDef__PRE_R3__;
/**
* Serves as the base non-VE container for NgStyle.
*
* While this is a base class that NgStyle extends from, the
* class itself acts as a container for non-VE code to setup
* a link to the `[style]` host binding (via the static
* `ngDirectiveDef` property on the class).
*
* Note that the `ngDirectiveDef` property's code is switched
* depending if VE is present or not (this allows for the
* binding code to be set only for newer versions of Angular).
*
* @publicApi
*/
export class NgStyleBase {
static ngDirectiveDef: any = ngStyleDirectiveDef;
constructor(protected _delegate: NgStyleImpl) {}
getValue() { return this._delegate.getValue(); }
}
/**
* @ngModule CommonModule
@ -44,58 +104,12 @@ import {Directive, DoCheck, ElementRef, Input, KeyValueChanges, KeyValueDiffer,
*
* @publicApi
*/
@Directive({selector: '[ngStyle]'})
export class NgStyle implements DoCheck {
// TODO(issue/24571): remove '!'.
private _ngStyle !: {[key: string]: string};
// TODO(issue/24571): remove '!'.
private _differ !: KeyValueDiffer<string, string|number>;
@Directive({selector: '[ngStyle]', providers: [NgStyleImplProvider]})
export class NgStyle extends NgStyleBase implements DoCheck {
constructor(delegate: NgStyleImpl) { super(delegate); }
constructor(
private _differs: KeyValueDiffers, private _ngEl: ElementRef, private _renderer: Renderer2) {}
@Input('ngStyle')
set ngStyle(value: {[klass: string]: any}|null) { this._delegate.setNgStyle(value); }
@Input()
set ngStyle(
/**
* A map of style properties, specified as colon-separated
* key-value pairs.
* * The key is a style name, with an optional `.<unit>` suffix
* (such as 'top.px', 'font-style.em').
* * The value is an expression to be evaluated.
*/
values: {[key: string]: string}) {
this._ngStyle = values;
if (!this._differ && values) {
this._differ = this._differs.find(values).create();
}
}
/**
* Applies the new styles if needed.
*/
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|null|undefined): void {
const [name, unit] = nameAndUnit.split('.');
value = value != null && unit ? `${value}${unit}` : value;
if (value != null) {
this._renderer.setStyle(this._ngEl.nativeElement, name, value as string);
} else {
this._renderer.removeStyle(this._ngEl.nativeElement, name);
}
}
ngDoCheck() { this._delegate.applyChanges(); }
}

114
packages/common/src/directives/ng_style_impl.ts Normal file
View File

@ -0,0 +1,114 @@
/**
* @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 {ElementRef, Injectable, KeyValueChanges, KeyValueDiffer, KeyValueDiffers, Renderer2} from '@angular/core';
import {StylingDiffer, StylingDifferOptions} from './styling_differ';
/**
* Used as a token for an injected service within the NgStyle directive.
*
* NgStyle behaves differenly whether or not VE is being used or not. If
* present then the legacy ngClass diffing algorithm will be used as an
* injected service. Otherwise the new diffing algorithm (which delegates
* to the `[style]` binding) will be used. This toggle behavior is done so
* via the ivy_switch mechanism.
*/
export abstract class NgStyleImpl {
abstract getValue(): {[key: string]: any}|null;
abstract setNgStyle(value: {[key: string]: any}|null): void;
abstract applyChanges(): void;
}
@Injectable()
export class NgStyleR2Impl implements NgStyleImpl {
// TODO(issue/24571): remove '!'.
private _ngStyle !: {[key: string]: string};
// TODO(issue/24571): remove '!'.
private _differ !: KeyValueDiffer<string, string|number>;
constructor(
private _ngEl: ElementRef, private _differs: KeyValueDiffers, private _renderer: Renderer2) {}
getValue() { return null; }
/**
* A map of style properties, specified as colon-separated
* key-value pairs.
* * The key is a style name, with an optional `.<unit>` suffix
* (such as 'top.px', 'font-style.em').
* * The value is an expression to be evaluated.
*/
setNgStyle(values: {[key: string]: string}) {
this._ngStyle = values;
if (!this._differ && values) {
this._differ = this._differs.find(values).create();
}
}
/**
* Applies the new styles if needed.
*/
applyChanges() {
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|null|undefined): void {
const [name, unit] = nameAndUnit.split('.');
value = value != null && unit ? `${value}${unit}` : value;
if (value != null) {
this._renderer.setStyle(this._ngEl.nativeElement, name, value as string);
} else {
this._renderer.removeStyle(this._ngEl.nativeElement, name);
}
}
}
@Injectable()
export class NgStyleR3Impl implements NgStyleImpl {
private _differ =
new StylingDiffer<{[key: string]: any}|null>('NgStyle', StylingDifferOptions.AllowUnits);
private _value: {[key: string]: any}|null = null;
getValue() { return this._value; }
setNgStyle(value: {[key: string]: any}|null) { this._differ.setValue(value); }
applyChanges() {
if (this._differ.hasValueChanged()) {
this._value = this._differ.value;
}
}
}
// the implementation for both NgClassR2Impl and NgClassR3Impl are
// not ivy_switch'd away, instead they are only hooked up into the
// DI via NgStyle's directive's provider property.
export const NgStyleImplProvider__PRE_R3__ = {
provide: NgStyleImpl,
useClass: NgStyleR2Impl
};
export const NgStyleImplProvider__POST_R3__ = {
provide: NgStyleImpl,
useClass: NgStyleR3Impl
};
export const NgStyleImplProvider = NgStyleImplProvider__PRE_R3__;

302
packages/common/src/directives/styling_differ.ts Normal file
View File

@ -0,0 +1,302 @@
/**
* @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
*/
/**
* Used to diff and convert ngStyle/ngClass instructions into [style] and [class] bindings.
*
* ngStyle and ngClass both accept various forms of input and behave differently than that
* of how [style] and [class] behave in Angular.
*
* The differences are:
* - ngStyle and ngClass both **watch** their binding values for changes each time CD runs
* while [style] and [class] bindings do not (they check for identity changes)
* - ngStyle allows for unit-based keys (e.g. `{'max-width.px':value}`) and [style] does not
* - ngClass supports arrays of class values and [class] only accepts map and string values
* - ngClass allows for multiple className keys (space-separated) within an array or map
* (as the * key) while [class] only accepts a simple key/value map object
*
* Having Angular understand and adapt to all the different forms of behavior is complicated
* and unnecessary. Instead, ngClass and ngStyle should have their input values be converted
* into something that the core-level [style] and [class] bindings understand.
*
* This [StylingDiffer] class handles this conversion by creating a new input value each time
* the inner representation of the binding value have changed.
*
* ## Why do we care about ngStyle/ngClass?
* The styling algorithm code (documented inside of `render3/interfaces/styling.ts`) needs to
* respect and understand the styling values emitted through ngStyle and ngClass (when they
* are present and used in a template).
*
* Instead of having these directives manage styling on their own, they should be included
* into the Angular styling algorithm that exists for [style] and [class] bindings.
*
* Here's why:
*
* - If ngStyle/ngClass is used in combination with [style]/[class] bindings then the
* styles and classes would fall out of sync and be applied and updated at
* inconsistent times
* - Both ngClass/ngStyle do not respect [class.name] and [style.prop] bindings
* (they will write over them given the right combination of events)
*
* ```
* <!-- if `w1` is updated then it will always override `w2`
* if `w2` is updated then it will always override `w1`
* if both are updated at the same time then `w1` wins -->
* <div [ngStyle]="{width:w1}" [style.width]="w2">...</div>
*
* <!-- if `w1` is updated then it will always lose to `w2`
* if `w2` is updated then it will always override `w1`
* if both are updated at the same time then `w2` wins -->
* <div [style]="{width:w1}" [style.width]="w2">...</div>
* ```
* - ngClass/ngStyle were written as a directives and made use of maps, closures and other
* expensive data structures which were evaluated each time CD runs
*/
export class StylingDiffer<T> {
public readonly value: T|null = null;
private _lastSetValue: {[key: string]: any}|string|string[]|null = null;
private _lastSetValueType: StylingDifferValueTypes = StylingDifferValueTypes.Null;
private _lastSetValueIdentityChange = false;
constructor(private _name: string, private _options: StylingDifferOptions) {}
/**
* Sets (updates) the styling value within the differ.
*
* Only when `hasValueChanged` is called then this new value will be evaluted
* and checked against the previous value.
*
* @param value the new styling value provided from the ngClass/ngStyle binding
*/
setValue(value: {[key: string]: any}|string[]|string|null) {
if (Array.isArray(value)) {
this._lastSetValueType = StylingDifferValueTypes.Array;
} else if (value instanceof Set) {
this._lastSetValueType = StylingDifferValueTypes.Set;
} else if (value && typeof value === 'string') {
if (!(this._options & StylingDifferOptions.AllowStringValue)) {
throw new Error(this._name + ' string values are not allowed');
}
this._lastSetValueType = StylingDifferValueTypes.String;
} else {
this._lastSetValueType = value ? StylingDifferValueTypes.Map : StylingDifferValueTypes.Null;
}
this._lastSetValueIdentityChange = true;
this._lastSetValue = value || null;
}
/**
* Determines whether or not the value has changed.
*
* This function can be called right after `setValue()` is called, but it can also be
* called incase the existing value (if it's a collection) changes internally. If the
* value is indeed a collection it will do the necessary diffing work and produce a
* new object value as assign that to `value`.
*
* @returns whether or not the value has changed in some way.
*/
hasValueChanged(): boolean {
let valueHasChanged = this._lastSetValueIdentityChange;
if (!valueHasChanged && !(this._lastSetValueType & StylingDifferValueTypes.Collection))
return false;
let finalValue: {[key: string]: any}|string|null = null;
const trimValues = (this._options & StylingDifferOptions.TrimProperties) ? true : false;
const parseOutUnits = (this._options & StylingDifferOptions.AllowUnits) ? true : false;
const allowSubKeys = (this._options & StylingDifferOptions.AllowSubKeys) ? true : false;
switch (this._lastSetValueType) {
// case 1: [input]="string"
case StylingDifferValueTypes.String:
const tokens = (this._lastSetValue as string).split(/\s+/g);
if (this._options & StylingDifferOptions.ForceAsMap) {
finalValue = {};
tokens.forEach((token, i) => (finalValue as{[key: string]: any})[token] = true);
} else {
finalValue = tokens.reduce((str, token, i) => str + (i ? ' ' : '') + token);
}
break;
// case 2: [input]="{key:value}"
case StylingDifferValueTypes.Map:
const map: {[key: string]: any} = this._lastSetValue as{[key: string]: any};
const keys = Object.keys(map);
if (!valueHasChanged) {
if (this.value) {
// we know that the classExp value exists and that it is
// a map (otherwise an identity change would have occurred)
valueHasChanged = mapHasChanged(keys, this.value as{[key: string]: any}, map);
} else {
valueHasChanged = true;
}
}
if (valueHasChanged) {
finalValue =
bulidMapFromValues(this._name, trimValues, parseOutUnits, allowSubKeys, map, keys);
}
break;
// case 3a: [input]="[str1, str2, ...]"
// case 3b: [input]="Set"
case StylingDifferValueTypes.Array:
case StylingDifferValueTypes.Set:
const values = Array.from(this._lastSetValue as string[] | Set<string>);
if (!valueHasChanged) {
const keys = Object.keys(this.value !);
valueHasChanged = !arrayEqualsArray(keys, values);
}
if (valueHasChanged) {
finalValue =
bulidMapFromValues(this._name, trimValues, parseOutUnits, allowSubKeys, values);
}
break;
// case 4: [input]="null|undefined"
default:
finalValue = null;
break;
}
if (valueHasChanged) {
(this as any).value = finalValue !;
}
return valueHasChanged;
}
}
/**
* Various options that are consumed by the [StylingDiffer] class.
*/
export const enum StylingDifferOptions {
None = 0b00000,
TrimProperties = 0b00001,
AllowSubKeys = 0b00010,
AllowStringValue = 0b00100,
AllowUnits = 0b01000,
ForceAsMap = 0b10000,
}
/**
* The different types of inputs that the [StylingDiffer] can deal with
*/
const enum StylingDifferValueTypes {
Null = 0b0000,
String = 0b0001,
Map = 0b0010,
Array = 0b0100,
Set = 0b1000,
Collection = 0b1110,
}
/**
* builds and returns a map based on the values input value
*
* If the `keys` param is provided then the `values` param is treated as a
* string map. Otherwise `values` is treated as a string array.
*/
function bulidMapFromValues(
errorPrefix: string, trim: boolean, parseOutUnits: boolean, allowSubKeys: boolean,
values: {[key: string]: any} | string[], keys?: string[]) {
const map: {[key: string]: any} = {};
if (keys) {
// case 1: map
for (let i = 0; i < keys.length; i++) {
let key = keys[i];
key = trim ? key.trim() : key;
const value = (values as{[key: string]: any})[key];
setMapValues(map, key, value, parseOutUnits, allowSubKeys);
}
} else {
// case 2: array
for (let i = 0; i < values.length; i++) {
let value = (values as string[])[i];
assertValidValue(errorPrefix, value);
value = trim ? value.trim() : value;
setMapValues(map, value, true, false, allowSubKeys);
}
}
return map;
}
function assertValidValue(errorPrefix: string, value: any) {
if (typeof value !== 'string') {
throw new Error(
`${errorPrefix} can only toggle CSS classes expressed as strings, got ${value}`);
}
}
function setMapValues(
map: {[key: string]: any}, key: string, value: any, parseOutUnits: boolean,
allowSubKeys: boolean) {
if (allowSubKeys && key.indexOf(' ') > 0) {
const innerKeys = key.split(/\s+/g);
for (let j = 0; j < innerKeys.length; j++) {
setIndividualMapValue(map, innerKeys[j], value, parseOutUnits);
}
} else {
setIndividualMapValue(map, key, value, parseOutUnits);
}
}
function setIndividualMapValue(
map: {[key: string]: any}, key: string, value: any, parseOutUnits: boolean) {
if (parseOutUnits) {
const values = normalizeStyleKeyAndValue(key, value);
value = values.value;
key = values.key;
}
map[key] = value;
}
function normalizeStyleKeyAndValue(key: string, value: string | null) {
const index = key.indexOf('.');
if (index > 0) {
const unit = key.substr(index + 1); // ignore the . ([width.px]="'40'" => "40px")
key = key.substring(0, index);
if (value != null) { // we should not convert null values to string
value += unit;
}
}
return {key, value};
}
function mapHasChanged(keys: string[], a: {[key: string]: any}, b: {[key: string]: any}) {
const oldKeys = Object.keys(a);
const newKeys = keys;
// the keys are different which means the map changed
if (!arrayEqualsArray(oldKeys, newKeys)) {
return true;
}
for (let i = 0; i < newKeys.length; i++) {
const key = newKeys[i];
if (a[key] !== b[key]) {
return true;
}
}
return false;
}
function arrayEqualsArray(a: any[] | null, b: any[] | null) {
if (a && b) {
if (a.length !== b.length) return false;
for (let i = 0; i < a.length; i++) {
if (b.indexOf(a[i]) === -1) return false;
}
return true;
}
return false;
}

2
packages/core/src/render3/index.ts
View File

@ -105,7 +105,7 @@ export {
export {NgModuleFactory, NgModuleRef, NgModuleType} from './ng_module_ref';
export {
AttributeMarker
AttributeMarker
} from './interfaces/node';
export {

84
packages/core/src/render3/styling/class_and_style_bindings.ts
View File

@ -6,7 +6,6 @@
* found in the LICENSE file at https://angular.io/license
*/
import {StyleSanitizeFn} from '../../sanitization/style_sanitizer';
import {assertNotEqual} from '../../util/assert';
import {EMPTY_ARRAY, EMPTY_OBJ} from '../empty';
import {AttributeMarker, TAttributes} from '../interfaces/node';
import {BindingStore, BindingType, Player, PlayerBuilder, PlayerFactory, PlayerIndex} from '../interfaces/player';
@ -418,16 +417,9 @@ export function updateContextWithBindings(
const directiveMultiStylesStartIndex =
multiStylesStartIndex + totalCurrentStyleBindings * StylingIndex.Size;
const cachedStyleMapIndex = cachedStyleMapValues.length;
// this means that ONLY directive style styling (like ngStyle) was used
// therefore the root directive will still need to be filled in
if (directiveIndex > 0 &&
cachedStyleMapValues.length <= MapBasedOffsetValuesIndex.ValuesStartPosition) {
cachedStyleMapValues.push(0, directiveMultiStylesStartIndex, null, 0);
}
cachedStyleMapValues.push(
0, directiveMultiStylesStartIndex, null, filteredStyleBindingNames.length);
registerMultiMapEntry(
context, directiveIndex, false, directiveMultiStylesStartIndex,
filteredStyleBindingNames.length);
for (let i = MapBasedOffsetValuesIndex.ValuesStartPosition; i < cachedStyleMapIndex;
i += MapBasedOffsetValuesIndex.Size) {
@ -441,16 +433,9 @@ export function updateContextWithBindings(
const directiveMultiClassesStartIndex =
multiClassesStartIndex + totalCurrentClassBindings * StylingIndex.Size;
const cachedClassMapIndex = cachedClassMapValues.length;
// this means that ONLY directive class styling (like ngClass) was used
// therefore the root directive will still need to be filled in
if (directiveIndex > 0 &&
cachedClassMapValues.length <= MapBasedOffsetValuesIndex.ValuesStartPosition) {
cachedClassMapValues.push(0, directiveMultiClassesStartIndex, null, 0);
}
cachedClassMapValues.push(
0, directiveMultiClassesStartIndex, null, filteredClassBindingNames.length);
registerMultiMapEntry(
context, directiveIndex, true, directiveMultiClassesStartIndex,
filteredClassBindingNames.length);
for (let i = MapBasedOffsetValuesIndex.ValuesStartPosition; i < cachedClassMapIndex;
i += MapBasedOffsetValuesIndex.Size) {
@ -619,7 +604,7 @@ export function updateStylingMap(
}
const multiStylesStartIndex = getMultiStylesStartIndex(context);
let multiClassesStartIndex = getMultiClassStartIndex(context);
let multiClassesStartIndex = getMultiClassesStartIndex(context);
let multiClassesEndIndex = context.length;
if (!ignoreAllStyleUpdates) {
@ -862,6 +847,7 @@ function patchStylingMapIntoContext(
valuesEntryShapeChange = true; // some values are missing
const ctxValue = getValue(context, ctxIndex);
const ctxFlag = getPointers(context, ctxIndex);
const ctxDirective = getDirectiveIndexFromEntry(context, ctxIndex);
if (ctxValue != null) {
valuesEntryShapeChange = true;
}
@ -1293,7 +1279,7 @@ function getMultiStartIndex(context: StylingContext): number {
return getMultiOrSingleIndex(context[StylingIndex.MasterFlagPosition]) as number;
}
function getMultiClassStartIndex(context: StylingContext): number {
function getMultiClassesStartIndex(context: StylingContext): number {
const classCache = context[StylingIndex.CachedMultiClasses];
return classCache
[MapBasedOffsetValuesIndex.ValuesStartPosition +
@ -1625,15 +1611,31 @@ export function getDirectiveIndexFromEntry(context: StylingContext, index: numbe
return value & DirectiveOwnerAndPlayerBuilderIndex.BitMask;
}
function getDirectiveIndexFromRegistry(context: StylingContext, directive: any) {
const index =
getDirectiveRegistryValuesIndexOf(context[StylingIndex.DirectiveRegistryPosition], directive);
ngDevMode &&
assertNotEqual(
index, -1,
`The provided directive ${directive} has not been allocated to the element\'s style/class bindings`);
return index > 0 ? index / DirectiveRegistryValuesIndex.Size : 0;
// return index / DirectiveRegistryValuesIndex.Size;
function getDirectiveIndexFromRegistry(context: StylingContext, directiveRef: any) {
let directiveIndex: number;
const dirs = context[StylingIndex.DirectiveRegistryPosition];
let index = getDirectiveRegistryValuesIndexOf(dirs, directiveRef);
if (index === -1) {
// if the directive was not allocated then this means that styling is
// being applied in a dynamic way AFTER the element was already instantiated
index = dirs.length;
directiveIndex = index > 0 ? index / DirectiveRegistryValuesIndex.Size : 0;
dirs.push(null, null, null, null);
dirs[index + DirectiveRegistryValuesIndex.DirectiveValueOffset] = directiveRef;
dirs[index + DirectiveRegistryValuesIndex.DirtyFlagOffset] = false;
dirs[index + DirectiveRegistryValuesIndex.SinglePropValuesIndexOffset] = -1;
const classesStartIndex =
getMultiClassesStartIndex(context) || StylingIndex.SingleStylesStartPosition;
registerMultiMapEntry(context, directiveIndex, true, context.length);
registerMultiMapEntry(context, directiveIndex, false, classesStartIndex);
} else {
directiveIndex = index > 0 ? index / DirectiveRegistryValuesIndex.Size : 0;
}
return directiveIndex;
}
function getDirectiveRegistryValuesIndexOf(
@ -1936,3 +1938,21 @@ function hyphenate(value: string): string {
return value.replace(
/[a-z][A-Z]/g, match => `${match.charAt(0)}-${match.charAt(1).toLowerCase()}`);
}
function registerMultiMapEntry(
context: StylingContext, directiveIndex: number, entryIsClassBased: boolean,
startPosition: number, count = 0) {
const cachedValues =
context[entryIsClassBased ? StylingIndex.CachedMultiClasses : StylingIndex.CachedMultiStyles];
if (directiveIndex > 0) {
const limit = MapBasedOffsetValuesIndex.ValuesStartPosition +
(directiveIndex * MapBasedOffsetValuesIndex.Size);
while (cachedValues.length < limit) {
// this means that ONLY directive class styling (like ngClass) was used
// therefore the root directive will still need to be filled in as well
// as any other directive spaces incase they only used static values
cachedValues.push(0, startPosition, null, 0);
}
}
cachedValues.push(0, startPosition, null, count);
}

10
packages/core/src/render3/styling/util.ts
View File

@ -56,6 +56,16 @@ export function allocStylingContext(
element: RElement | null, templateStyleContext: StylingContext): StylingContext {
// each instance gets a copy
const context = templateStyleContext.slice() as any as StylingContext;
// the HEADER values contain arrays which also need
// to be copied over into the new context
for (let i = 0; i < StylingIndex.SingleStylesStartPosition; i++) {
const value = templateStyleContext[i];
if (Array.isArray(value)) {
context[i] = value.slice();
}
}
context[StylingIndex.ElementPosition] = element;
// this will prevent any other directives from extending the context

2
packages/core/test/bundling/animation_world/index.ts
View File

@ -91,7 +91,7 @@ class BoxWithOverriddenStylesComponent {
<box-with-overridden-styles
style="display:block"
[style]="{'border-radius':'50px', 'border': '50px solid teal'}">
[style]="{'border-radius':'50px', 'border': '50px solid teal'}" [ngStyle]="{transform:'rotate(50deg)'}">
</box-with-overridden-styles>
`,
})

6
packages/core/test/bundling/todo/bundle.golden_symbols.json
View File

@ -722,6 +722,9 @@
{
"name": "getMatchingBindingIndex"
},
{
"name": "getMultiClassesStartIndex"
},
{
"name": "getMultiOrSingleIndex"
},
@ -1100,6 +1103,9 @@
{
"name": "refreshDynamicEmbeddedViews"
},
{
"name": "registerMultiMapEntry"
},
{
"name": "registerPostOrderHooks"
},

68
packages/core/test/render3/styling/class_and_style_bindings_spec.ts
View File

@ -1693,18 +1693,6 @@ describe('style and class based bindings', () => {
]);
});
it('should throw an error if a directive is provided that isn\'t registered', () => {
const template = createEmptyStylingContext();
const knownDir = {};
const unknownDir = {};
updateContextWithBindings(template, knownDir, null, ['color']);
const ctx = allocStylingContext(element, template);
updateStyleProp(ctx, 0, 'blue', knownDir);
expect(() => { updateStyleProp(ctx, 0, 'blue', unknownDir); }).toThrow();
});
it('should use a different sanitizer when a different directive\'s binding is updated',
() => {
const getStyles = trackStylesFactory();
@ -1766,6 +1754,62 @@ describe('style and class based bindings', () => {
expect(((ctx[colorIndex] as number) & StylingFlags.Sanitize) > 0).toBeFalsy();
expect(getStyles(ctx, dirWithoutSanitizer)).toEqual({color: 'green'});
});
it('should automatically register a styling context with a foreign directive if styling is applied with said directive',
() => {
const template = createEmptyStylingContext();
const knownDir = {};
const foreignDir = {};
updateContextWithBindings(template, knownDir);
const ctx = allocStylingContext(element, template);
expect(ctx[StylingIndex.DirectiveRegistryPosition]).toEqual([
null, //
-1, //
false, //
null, //
knownDir, //
2, //
false, //
null, //
]);
expect(ctx[StylingIndex.CachedMultiClasses].length)
.toEqual(template[StylingIndex.CachedMultiClasses].length);
expect(ctx[StylingIndex.CachedMultiClasses]).toEqual([0, 0, 9, null, 0, 0, 9, null, 0]);
expect(ctx[StylingIndex.CachedMultiStyles].length)
.toEqual(template[StylingIndex.CachedMultiStyles].length);
expect(ctx[StylingIndex.CachedMultiStyles]).toEqual([0, 0, 9, null, 0, 0, 9, null, 0]);
updateStylingMap(ctx, 'foo', null, foreignDir);
expect(ctx[StylingIndex.DirectiveRegistryPosition]).toEqual([
null, //
-1, //
false, //
null, //
knownDir, //
2, //
false, //
null, //
foreignDir, //
-1, //
true, //
null, //
]);
expect(ctx[StylingIndex.CachedMultiClasses].length)
.not.toEqual(template[StylingIndex.CachedMultiClasses].length);
expect(ctx[StylingIndex.CachedMultiClasses]).toEqual([
1, 0, 9, null, 0, 0, 9, null, 0, 0, 9, 'foo', 1
]);
expect(ctx[StylingIndex.CachedMultiStyles].length)
.not.toEqual(template[StylingIndex.CachedMultiStyles].length);
expect(ctx[StylingIndex.CachedMultiStyles]).toEqual([
0, 0, 9, null, 0, 0, 9, null, 0, 0, 9, null, 0
]);
});
});
it('should skip issuing style updates if there is nothing to update upon first render', () => {

30
tools/public_api_guard/common/common.d.ts vendored
View File

@ -207,15 +207,24 @@ export declare class LowerCasePipe implements PipeTransform {
transform(value: string): string;
}
export declare class NgClass implements DoCheck {
export declare class NgClass extends NgClassBase implements DoCheck {
klass: string;
ngClass: string | string[] | Set<string> | {
[klass: string]: any;
};
constructor(_iterableDiffers: IterableDiffers, _keyValueDiffers: KeyValueDiffers, _ngEl: ElementRef, _renderer: Renderer2);
constructor(delegate: NgClassImpl);
ngDoCheck(): void;
}
export declare class NgClassBase {
protected _delegate: NgClassImpl;
constructor(_delegate: NgClassImpl);
getValue(): {
[key: string]: any;
} | null;
static ngDirectiveDef: any;
}
export declare class NgComponentOutlet implements OnChanges, OnDestroy {
ngComponentOutlet: Type<any>;
ngComponentOutletContent: any[][];
@ -283,14 +292,23 @@ export declare class NgPluralCase {
constructor(value: string, template: TemplateRef<Object>, viewContainer: ViewContainerRef, ngPlural: NgPlural);
}
export declare class NgStyle implements DoCheck {
export declare class NgStyle extends NgStyleBase implements DoCheck {
ngStyle: {
[key: string]: string;
};
constructor(_differs: KeyValueDiffers, _ngEl: ElementRef, _renderer: Renderer2);
[klass: string]: any;
} | null;
constructor(delegate: NgStyleImpl);
ngDoCheck(): void;
}
export declare class NgStyleBase {
protected _delegate: NgStyleImpl;
constructor(_delegate: NgStyleImpl);
getValue(): {
[key: string]: any;
} | null;
static ngDirectiveDef: any;
}
export declare class NgSwitch {
ngSwitch: any;
}