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

refactor(ivy): migrate all host-specific styling instructions to element-level styling instructions (#30336) 

This patch removes all host-specific styling instructions in favor of
using element-level instructions instead. Because of the previous
patches that made sure `select(n)` worked between styling calls, all
host level instructions are not needed anymore. This patch changes each
of those instruction calls to use any of the `elementStyling*`,
`elementStyle*` and `elementClass*` styling instructions instead.

PR Close #30336
This commit is contained in:
Matias Niemelä 2019-05-08 10:18:33 -07:00 committed by Alex Rickabaugh
parent 452f121486
commit c016e2c4ec
17 changed files with 212 additions and 399 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,7 +5,7 @@
* 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, ɵɵelementHostClassMap, ɵɵelementHostStyling, ɵɵelementHostStylingApply} from '@angular/core';
import {Directive, DoCheck, Input, ɵRenderFlags, ɵɵdefineDirective, ɵɵelementClassMap, ɵɵelementStyling, ɵɵelementStylingApply} from '@angular/core';
import {NgClassImpl, NgClassImplProvider} from './ng_class_impl';
@ -35,11 +35,11 @@ export const ngClassDirectiveDef__POST_R3__ = ɵɵdefineDirective({
factory: () => {},
hostBindings: function(rf: ɵRenderFlags, ctx: any, elIndex: number) {
if (rf & ɵRenderFlags.Create) {
ɵɵelementHostStyling();
ɵɵelementStyling();
}
if (rf & ɵRenderFlags.Update) {
ɵɵelementHostClassMap(ctx.getValue());
ɵɵelementHostStylingApply();
ɵɵelementClassMap(ctx.getValue());
ɵɵelementStylingApply();
}
}
});

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

@ -5,7 +5,7 @@
* 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, ɵɵelementHostStyleMap, ɵɵelementHostStyling, ɵɵelementHostStylingApply} from '@angular/core';
import {Directive, DoCheck, Input, ɵRenderFlags, ɵɵdefineDirective, ɵɵelementStyleMap, ɵɵelementStyling, ɵɵelementStylingApply} from '@angular/core';
import {NgStyleImpl, NgStyleImplProvider} from './ng_style_impl';
@ -35,11 +35,11 @@ export const ngStyleDirectiveDef__POST_R3__ = ɵɵdefineDirective({
factory: () => {},
hostBindings: function(rf: ɵRenderFlags, ctx: any, elIndex: number) {
if (rf & ɵRenderFlags.Create) {
ɵɵelementHostStyling();
ɵɵelementStyling();
}
if (rf & ɵRenderFlags.Update) {
ɵɵelementHostStyleMap(ctx.getValue());
ɵɵelementHostStylingApply();
ɵɵelementStyleMap(ctx.getValue());
ɵɵelementStylingApply();
}
}
});

78
packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts
View File

@ -1105,14 +1105,14 @@ describe('compiler compliance: styling', () => {
hostBindings: function MyComponent_HostBindings(rf, ctx, elIndex) {
if (rf & 1) {
$r3$.ɵɵelementHostAttrs($e0_attrs$);
$r3$.ɵɵelementHostStyling($e0_classBindings$, $e0_styleBindings$, $r3$.ɵɵdefaultStyleSanitizer);
$r3$.ɵɵelementStyling($e0_classBindings$, $e0_styleBindings$, $r3$.ɵɵdefaultStyleSanitizer);
}
if (rf & 2) {
$r3$.ɵɵelementHostStyleMap(ctx.myStyle);
$r3$.ɵɵelementHostClassMap(ctx.myClass);
$r3$.ɵɵelementHostStyleProp(0, ctx.myColorProp);
$r3$.ɵɵelementHostClassProp(0, ctx.myFooClass);
$r3$.ɵɵelementHostStylingApply();
$r3$.ɵɵelementStyleMap(ctx.myStyle);
$r3$.ɵɵelementClassMap(ctx.myClass);
$r3$.ɵɵelementStyleProp(0, ctx.myColorProp);
$r3$.ɵɵelementClassProp(0, ctx.myFooClass);
$r3$.ɵɵelementStylingApply();
}
},
consts: 0,
@ -1166,16 +1166,16 @@ describe('compiler compliance: styling', () => {
…
hostBindings: function MyComponent_HostBindings(rf, ctx, elIndex) {
if (rf & 1) {
$r3$.ɵɵelementHostStyling(_c0, _c1, $r3$.ɵɵdefaultStyleSanitizer);
$r3$.ɵɵelementStyling(_c0, _c1, $r3$.ɵɵdefaultStyleSanitizer);
}
if (rf & 2) {
$r3$.ɵɵelementHostStyleMap(ctx.myStyle);
$r3$.ɵɵelementHostClassMap(ctx.myClasses);
$r3$.ɵɵelementHostStyleProp(0, ctx.myHeightProp, "pt");
$r3$.ɵɵelementHostStyleProp(1, ctx.myWidthProp);
$r3$.ɵɵelementHostClassProp(0, ctx.myBarClass);
$r3$.ɵɵelementHostClassProp(1, ctx.myFooClass);
$r3$.ɵɵelementHostStylingApply();
$r3$.ɵɵelementStyleMap(ctx.myStyle);
$r3$.ɵɵelementClassMap(ctx.myClasses);
$r3$.ɵɵelementStyleProp(0, ctx.myHeightProp, "pt");
$r3$.ɵɵelementStyleProp(1, ctx.myWidthProp);
$r3$.ɵɵelementClassProp(0, ctx.myBarClass);
$r3$.ɵɵelementClassProp(1, ctx.myFooClass);
$r3$.ɵɵelementStylingApply();
}
},
consts: 0,
@ -1250,14 +1250,14 @@ describe('compiler compliance: styling', () => {
…
hostBindings: function MyComponent_HostBindings(rf, ctx, elIndex) {
if (rf & 1) {
$r3$.ɵɵelementHostStyling(_c0, _c1, $r3$.ɵɵdefaultStyleSanitizer);
$r3$.ɵɵelementStyling(_c0, _c1, $r3$.ɵɵdefaultStyleSanitizer);
}
if (rf & 2) {
$r3$.ɵɵelementHostStyleMap(ctx.myStyleExp);
$r3$.ɵɵelementHostClassMap(ctx.myClassExp);
$r3$.ɵɵelementHostStyleProp(0, ctx.myWidthExp, null, true);
$r3$.ɵɵelementHostClassProp(0, ctx.myFooClassExp, true);
$r3$.ɵɵelementHostStylingApply();
$r3$.ɵɵelementStyleMap(ctx.myStyleExp);
$r3$.ɵɵelementClassMap(ctx.myClassExp);
$r3$.ɵɵelementStyleProp(0, ctx.myWidthExp, null, true);
$r3$.ɵɵelementClassProp(0, ctx.myFooClassExp, true);
$r3$.ɵɵelementStylingApply();
}
},
`;
@ -1319,33 +1319,33 @@ describe('compiler compliance: styling', () => {
…
function ClassDirective_HostBindings(rf, ctx, elIndex) {
if (rf & 1) {
$r3$.ɵɵelementHostStyling();
$r3$.ɵɵelementStyling();
}
if (rf & 2) {
$r3$.ɵɵelementHostClassMap(ctx.myClassMap);
$r3$.ɵɵelementHostStylingApply();
$r3$.ɵɵelementClassMap(ctx.myClassMap);
$r3$.ɵɵelementStylingApply();
}
}
…
function WidthDirective_HostBindings(rf, ctx, elIndex) {
if (rf & 1) {
$r3$.ɵɵelementHostStyling($widthDir_classes$, $widthDir_styles$);
$r3$.ɵɵelementStyling($widthDir_classes$, $widthDir_styles$);
}
if (rf & 2) {
$r3$.ɵɵelementHostStyleProp(0, ctx.myWidth);
$r3$.ɵɵelementHostClassProp(0, ctx.myFooClass);
$r3$.ɵɵelementHostStylingApply();
$r3$.ɵɵelementStyleProp(0, ctx.myWidth);
$r3$.ɵɵelementClassProp(0, ctx.myFooClass);
$r3$.ɵɵelementStylingApply();
}
}
…
function HeightDirective_HostBindings(rf, ctx, elIndex) {
if (rf & 1) {
$r3$.ɵɵelementHostStyling($heightDir_classes$, $heightDir_styles$);
$r3$.ɵɵelementStyling($heightDir_classes$, $heightDir_styles$);
}
if (rf & 2) {
$r3$.ɵɵelementHostStyleProp(0, ctx.myHeight);
$r3$.ɵɵelementHostClassProp(0, ctx.myBarClass);
$r3$.ɵɵelementHostStylingApply();
$r3$.ɵɵelementStyleProp(0, ctx.myHeight);
$r3$.ɵɵelementClassProp(0, ctx.myBarClass);
$r3$.ɵɵelementStylingApply();
}
}
…
@ -1401,14 +1401,14 @@ describe('compiler compliance: styling', () => {
if (rf & 1) {
$r3$.ɵɵallocHostVars(2);
$r3$.ɵɵelementHostAttrs($_c0$);
$r3$.ɵɵelementHostStyling(null, null, $r3$.ɵɵdefaultStyleSanitizer);
$r3$.ɵɵelementStyling(null, null, $r3$.ɵɵdefaultStyleSanitizer);
}
if (rf & 2) {
$r3$.ɵɵproperty("id", ctx.id, null, true);
$r3$.ɵɵproperty("title", ctx.title, null, true);
$r3$.ɵɵelementHostStyleMap(ctx.myStyle);
$r3$.ɵɵelementHostClassMap(ctx.myClass);
$r3$.ɵɵelementHostStylingApply();
$r3$.ɵɵelementStyleMap(ctx.myStyle);
$r3$.ɵɵelementClassMap(ctx.myClass);
$r3$.ɵɵelementStylingApply();
}
}
`;
@ -1448,14 +1448,14 @@ describe('compiler compliance: styling', () => {
hostBindings: function WidthDirective_HostBindings(rf, ctx, elIndex) {
if (rf & 1) {
$r3$.ɵɵallocHostVars(2);
$r3$.ɵɵelementHostStyling($_c0$, $_c1$);
$r3$.ɵɵelementStyling($_c0$, $_c1$);
}
if (rf & 2) {
$r3$.ɵɵproperty("id", ctx.id, null, true);
$r3$.ɵɵproperty("title", ctx.title, null, true);
$r3$.ɵɵelementHostStyleProp(0, ctx.myWidth);
$r3$.ɵɵelementHostClassProp(0, ctx.myFooClass);
$r3$.ɵɵelementHostStylingApply();
$r3$.ɵɵelementStyleProp(0, ctx.myWidth);
$r3$.ɵɵelementClassProp(0, ctx.myFooClass);
$r3$.ɵɵelementStylingApply();
}
}
`;

6
packages/compiler-cli/test/ngtsc/ngtsc_spec.ts
View File

@ -1777,13 +1777,13 @@ describe('ngtsc behavioral tests', () => {
i0.\u0275\u0275listener("click", function FooCmp_click_HostBindingHandler($event) { return ctx.onClick($event); });
i0.\u0275\u0275listener("click", function FooCmp_click_HostBindingHandler($event) { return ctx.onBodyClick($event); }, false, i0.\u0275\u0275resolveBody);
i0.\u0275\u0275listener("change", function FooCmp_change_HostBindingHandler($event) { return ctx.onChange(ctx.arg1, ctx.arg2, ctx.arg3); });
i0.\u0275\u0275elementHostStyling(_c0);
i0.\u0275\u0275elementStyling(_c0);
}
if (rf & 2) {
i0.\u0275\u0275elementAttribute(elIndex, "hello", i0.\u0275\u0275bind(ctx.foo));
i0.\u0275\u0275property("prop", ctx.bar, null, true);
i0.\u0275\u0275elementHostClassProp(0, ctx.someClass);
i0.\u0275\u0275elementHostStylingApply();
i0.\u0275\u0275elementClassProp(0, ctx.someClass);
i0.\u0275\u0275elementStylingApply();
}
}
`;

17
packages/compiler/src/render3/r3_identifiers.ts
View File

@ -62,23 +62,6 @@ export class Identifiers {
static elementHostAttrs: o.ExternalReference = {name: 'ɵɵelementHostAttrs', moduleName: CORE};
static elementHostStyling: o.ExternalReference = {name: 'ɵɵelementHostStyling', moduleName: CORE};
static elementHostStyleMap:
o.ExternalReference = {name: 'ɵɵelementHostStyleMap', moduleName: CORE};
static elementHostClassMap:
o.ExternalReference = {name: 'ɵɵelementHostClassMap', moduleName: CORE};
static elementHostStyleProp:
o.ExternalReference = {name: 'ɵɵelementHostStyleProp', moduleName: CORE};
static elementHostClassProp:
o.ExternalReference = {name: 'ɵɵelementHostClassProp', moduleName: CORE};
static elementHostStylingApply:
o.ExternalReference = {name: 'ɵɵelementHostStylingApply', moduleName: CORE};
static containerCreate: o.ExternalReference = {name: 'ɵɵcontainer', moduleName: CORE};
static nextContext: o.ExternalReference = {name: 'ɵɵnextContext', moduleName: CORE};

44
packages/compiler/src/render3/view/styling_builder.ts
View File

@ -264,7 +264,7 @@ export class StylingBuilder {
reference: R3.elementHostAttrs,
allocateBindingSlots: 0,
buildParams: () => {
// params => elementHostAttrs(agetDirectiveContext()ttrs)
// params => elementHostAttrs(attrs)
this.populateInitialStylingAttrs(attrs);
const attrArray = !attrs.some(attr => attr instanceof o.WrappedNodeExpr) ?
getConstantLiteralFromArray(constantPool, attrs) :
@ -284,11 +284,11 @@ export class StylingBuilder {
*/
buildElementStylingInstruction(sourceSpan: ParseSourceSpan|null, constantPool: ConstantPool):
Instruction|null {
const reference = this._directiveExpr ? R3.elementHostStyling : R3.elementStyling;
if (this.hasBindings) {
return {
sourceSpan,
allocateBindingSlots: 0, reference,
allocateBindingSlots: 0,
reference: R3.elementStyling,
buildParams: () => {
// a string array of every style-based binding
const styleBindingProps =
@ -303,13 +303,8 @@ export class StylingBuilder {
// (otherwise a shorter amount of params will be filled). The code below helps
// determine how many params are required in the expression code.
//
// HOST:
// min params => elementHostStyling()
// max params => elementHostStyling(classBindings, styleBindings, sanitizer)
//
// Template:
// min params => elementStyling()
// max params => elementStyling(classBindings, styleBindings, sanitizer)
// min params => elementStyling()
// max params => elementStyling(classBindings, styleBindings, sanitizer)
//
const params: o.Expression[] = [];
let expectedNumberOfArgs = 0;
@ -377,14 +372,7 @@ export class StylingBuilder {
totalBindingSlotsRequired += mapValue.expressions.length;
}
const isHostBinding = this._directiveExpr;
let reference: o.ExternalReference;
if (isClassBased) {
reference = isHostBinding ? R3.elementHostClassMap : R3.elementClassMap;
} else {
reference = isHostBinding ? R3.elementHostStyleMap : R3.elementStyleMap;
}
const reference = isClassBased ? R3.elementClassMap : R3.elementStyleMap;
return {
sourceSpan: stylingInput.sourceSpan,
reference,
@ -405,12 +393,8 @@ export class StylingBuilder {
sourceSpan: input.sourceSpan,
allocateBindingSlots: totalBindingSlotsRequired, reference,
buildParams: (convertFn: (value: any) => o.Expression) => {
// HOST:
// min params => elementHostStylingProp(bindingIndex, value)
// max params => elementHostStylingProp(bindingIndex, value, overrideFlag)
// Template:
// min params => elementStylingProp(elmIndex, bindingIndex, value)
// max params => elementStylingProp(elmIndex, bindingIndex, value, overrideFlag)
// min params => elementStylingProp(elmIndex, bindingIndex, value)
// max params => elementStylingProp(elmIndex, bindingIndex, value, overrideFlag)
const params: o.Expression[] = [];
params.push(o.literal(bindingIndex));
params.push(convertFn(value));
@ -435,30 +419,24 @@ export class StylingBuilder {
private _buildClassInputs(valueConverter: ValueConverter): Instruction[] {
if (this._singleClassInputs) {
const isHostBinding = !!this._directiveExpr;
const reference = isHostBinding ? R3.elementHostClassProp : R3.elementClassProp;
return this._buildSingleInputs(
reference, this._singleClassInputs, this._classesIndex, false, valueConverter);
R3.elementClassProp, this._singleClassInputs, this._classesIndex, false, valueConverter);
}
return [];
}
private _buildStyleInputs(valueConverter: ValueConverter): Instruction[] {
if (this._singleStyleInputs) {
const isHostBinding = !!this._directiveExpr;
const reference = isHostBinding ? R3.elementHostStyleProp : R3.elementStyleProp;
return this._buildSingleInputs(
reference, this._singleStyleInputs, this._stylesIndex, true, valueConverter);
R3.elementStyleProp, this._singleStyleInputs, this._stylesIndex, true, valueConverter);
}
return [];
}
private _buildApplyFn(): Instruction {
const isHostBinding = this._directiveExpr;
const reference = isHostBinding ? R3.elementHostStylingApply : R3.elementStylingApply;
return {
sourceSpan: this._lastStylingInput ? this._lastStylingInput.sourceSpan : null,
reference,
reference: R3.elementStylingApply,
allocateBindingSlots: 0,
buildParams: () => { return []; }
};

7
packages/core/src/core_render3_private_export.ts
View File

@ -116,14 +116,7 @@ export {
ɵɵelementStyleProp,
ɵɵelementStylingApply,
ɵɵelementClassProp,
ɵɵelementHostAttrs,
ɵɵelementHostClassMap,
ɵɵelementHostStyleMap,
ɵɵelementHostStyling,
ɵɵelementHostStyleProp,
ɵɵelementHostClassProp,
ɵɵelementHostStylingApply,
ɵɵselect,
ɵɵtextBinding,

5
packages/core/src/render3/component.ts
View File

@ -111,6 +111,11 @@ export function renderComponent<T>(
opts: CreateComponentOptions = {}): T {
ngDevMode && publishDefaultGlobalUtils();
ngDevMode && assertComponentType(componentType);
// this is preemptively set to avoid having test and debug code accidentally
// read data from a previous application state...
setActiveHostElement(null);
const rendererFactory = opts.rendererFactory || domRendererFactory3;
const sanitizer = opts.sanitizer || null;
const componentDef = getComponentDef<T>(componentType) !;

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

@ -42,12 +42,6 @@ export {
ɵɵelementEnd,
ɵɵelementHostAttrs,
ɵɵelementHostClassMap,
ɵɵelementHostClassProp,
ɵɵelementHostStyleMap,
ɵɵelementHostStyleProp,
ɵɵelementHostStyling,
ɵɵelementHostStylingApply,
ɵɵelementProperty,
ɵɵelementStart,
ɵɵelementStyleMap,

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

@ -560,6 +560,7 @@ export function createDirectivesAndLocals(
instantiateAllDirectives(tView, lView, previousOrParentTNode);
invokeDirectivesHostBindings(tView, lView, previousOrParentTNode);
saveResolvedLocalsInData(lView, previousOrParentTNode, localRefExtractor);
setActiveHostElement(null);
}
/**

328
packages/core/src/render3/instructions/styling.ts
View File

@ -39,14 +39,6 @@ import {scheduleTick, setInputsForProperty} from './shared';
* - elementStyleProp
* - elementClassProp
* - elementStylingApply
*
* Host bindings level styling instructions:
* - elementHostStyling
* - elementHostStyleMap
* - elementHostClassMap
* - elementHostStyleProp
* - elementHostClassProp
* - elementHostStylingApply
*/
/**
@ -66,6 +58,9 @@ import {scheduleTick, setInputsForProperty} from './shared';
* @param styleSanitizer An optional sanitizer function that will be used to sanitize any CSS
* style values that are applied to the element (during rendering).
*
* Note that this will allocate the provided style/class bindings to the host element if
* this function is called within a host binding.
*
* @codeGenApi
*/
export function ɵɵelementStyling(
@ -76,62 +71,31 @@ export function ɵɵelementStyling(
tNode.stylingTemplate = createEmptyStylingContext();
}
// calling the function below ensures that the template's binding values
// are applied as the first set of bindings into the context. If any other
// styling bindings are set on the same element (by directives and/or
// components) then they will be applied at the end of the `elementEnd`
// instruction (because directives are created first before styling is
// executed for a new element).
initElementStyling(
tNode, classBindingNames, styleBindingNames, styleSanitizer,
DEFAULT_TEMPLATE_DIRECTIVE_INDEX);
}
/**
* Allocates style and class binding properties on the host element during creation mode
* within the host bindings function of a directive or component.
*
* This instruction is meant to be called during creation mode to register all
* dynamic style and class host bindings on the host element of a directive or
* component. Note that this is only used for binding values (see `elementHostAttrs`
* to learn how to assign static styling values to the host element).
*
* @param classBindingNames An array containing bindable class names.
* The `elementHostClassProp` instruction refers to the class name by index in
* this array (i.e. `['foo', 'bar']` means `foo=0` and `bar=1`).
* @param styleBindingNames An array containing bindable style properties.
* The `elementHostStyleProp` instruction refers to the class name by index in
* this array (i.e. `['width', 'height']` means `width=0` and `height=1`).
* @param styleSanitizer An optional sanitizer function that will be used to sanitize any CSS
* style values that are applied to the element (during rendering).
* Note that the sanitizer instance itself is tied to the provided `directive` and
* will not be used if the same property is assigned in another directive or
* on the element directly.
*
* @codeGenApi
*/
export function ɵɵelementHostStyling(
classBindingNames?: string[] | null, styleBindingNames?: string[] | null,
styleSanitizer?: StyleSanitizeFn | null): void {
const tNode = getPreviousOrParentTNode();
if (!tNode.stylingTemplate) {
tNode.stylingTemplate = createEmptyStylingContext();
}
const directiveStylingIndex = getActiveDirectiveStylingIndex();
if (directiveStylingIndex) {
// despite the binding being applied in a queue (below), the allocation
// of the directive into the context happens right away. The reason for
// this is to retain the ordering of the directives (which is important
// for the prioritization of bindings).
allocateOrUpdateDirectiveIntoContext(tNode.stylingTemplate, directiveStylingIndex);
// despite the binding being applied in a queue (below), the allocation
// of the directive into the context happens right away. The reason for
// this is to retain the ordering of the directives (which is important
// for the prioritization of bindings).
allocateOrUpdateDirectiveIntoContext(tNode.stylingTemplate, directiveStylingIndex);
const fns = tNode.onElementCreationFns = tNode.onElementCreationFns || [];
fns.push(() => {
const fns = tNode.onElementCreationFns = tNode.onElementCreationFns || [];
fns.push(() => {
initElementStyling(
tNode, classBindingNames, styleBindingNames, styleSanitizer, directiveStylingIndex);
registerHostDirective(tNode.stylingTemplate !, directiveStylingIndex);
});
} else {
// calling the function below ensures that the template's binding values
// are applied as the first set of bindings into the context. If any other
// styling bindings are set on the same element (by directives and/or
// components) then they will be applied at the end of the `elementEnd`
// instruction (because directives are created first before styling is
// executed for a new element).
initElementStyling(
tNode, classBindingNames, styleBindingNames, styleSanitizer, directiveStylingIndex);
registerHostDirective(tNode.stylingTemplate !, directiveStylingIndex);
});
tNode, classBindingNames, styleBindingNames, styleSanitizer,
DEFAULT_TEMPLATE_DIRECTIVE_INDEX);
}
}
function initElementStyling(
@ -157,16 +121,16 @@ function initElementStyling(
* @param styleIndex Index of style to update. This index value refers to the
* index of the style in the style bindings array that was passed into
* `elementStyling`.
* @param value New value to write (falsy to remove). Note that if a directive also
* attempts to write to the same binding value (via `elementHostStyleProp`)
* then it will only be able to do so if the binding value assigned via
* `elementStyleProp` is falsy (or doesn't exist at all).
* @param value New value to write (falsy to remove).
* @param suffix Optional suffix. Used with scalar values to add unit such as `px`.
* Note that when a suffix is provided then the underlying sanitizer will
* be ignored.
* @param forceOverride Whether or not to update the styling value immediately
* (despite the other bindings possibly having priority)
*
* Note that this will apply the provided style value to the host element if this function is called
* within a host binding.
*
* @codeGenApi
*/
export function ɵɵelementStyleProp(
@ -175,46 +139,15 @@ export function ɵɵelementStyleProp(
const index = getSelectedIndex();
const valueToAdd = resolveStylePropValue(value, suffix);
const stylingContext = getStylingContext(index, getLView());
updateElementStyleProp(
stylingContext, styleIndex, valueToAdd, DEFAULT_TEMPLATE_DIRECTIVE_INDEX, forceOverride);
}
/**
* Update a host style binding value on the host element within a component/directive.
*
* If the style value is falsy then it will be removed from the host element
* (or assigned a different value depending if there are any styles placed
* on the same element with `elementHostStyleMap` or any static styles that
* are present from when the element was patched with `elementHostStyling`).
*
* Note that the styling applied to the host element once
* `elementHostStylingApply` is called.
*
* @param styleIndex Index of style to update. This index value refers to the
* index of the style in the style bindings array that was passed into
* `elementHostStyling`.
* @param value New value to write (falsy to remove). The value may or may not
* be applied to the element depending on the template/component/directive
* prioritization (see `interfaces/styling.ts`)
* @param suffix Optional suffix. Used with scalar values to add unit such as `px`.
* Note that when a suffix is provided then the underlying sanitizer will
* be ignored.
* @param forceOverride Whether or not to update the styling value immediately
* (despite the other bindings possibly having priority)
*
* @codeGenApi
*/
export function ɵɵelementHostStyleProp(
styleIndex: number, value: string | number | String | PlayerFactory | null,
suffix?: string | null, forceOverride?: boolean): void {
const directiveStylingIndex = getActiveDirectiveStylingIndex();
const hostElementIndex = getSelectedIndex();
const stylingContext = getStylingContext(hostElementIndex, getLView());
const valueToAdd = resolveStylePropValue(value, suffix);
const args: ParamsOf<typeof updateElementStyleProp> =
[stylingContext, styleIndex, valueToAdd, directiveStylingIndex, forceOverride];
enqueueHostInstruction(stylingContext, directiveStylingIndex, updateElementStyleProp, args);
if (directiveStylingIndex) {
const args: ParamsOf<typeof updateElementStyleProp> =
[stylingContext, styleIndex, valueToAdd, directiveStylingIndex, forceOverride];
enqueueHostInstruction(stylingContext, directiveStylingIndex, updateElementStyleProp, args);
} else {
updateElementStyleProp(
stylingContext, styleIndex, valueToAdd, DEFAULT_TEMPLATE_DIRECTIVE_INDEX, forceOverride);
}
}
function resolveStylePropValue(
@ -252,6 +185,9 @@ function resolveStylePropValue(
* @param forceOverride Whether or not this value will be applied regardless
* of where it is being set within the styling priority structure.
*
* Note that this will apply the provided class value to the host element if this function
* is called within a host binding.
*
* @codeGenApi
*/
export function ɵɵelementClassProp(
@ -260,45 +196,19 @@ export function ɵɵelementClassProp(
const input = (value instanceof BoundPlayerFactory) ?
(value as BoundPlayerFactory<boolean|null>) :
booleanOrNull(value);
const stylingContext = getStylingContext(index, getLView());
updateElementClassProp(
stylingContext, classIndex, input, DEFAULT_TEMPLATE_DIRECTIVE_INDEX, forceOverride);
}
/**
* Update a class host binding for a directive's/component's host element within
* the host bindings function.
*
* This instruction is meant to handle the `@HostBinding('class.foo')` case and,
* therefore, the class binding itself must already be allocated using
* `elementHostStyling` within the creation block.
*
* @param classIndex Index of class to toggle. This index value refers to the
* index of the class in the class bindings array that was passed into
* `elementHostStlying` (which is meant to be called before this
* function is).
* @param value A true/false value which will turn the class on or off.
* @param forceOverride Whether or not this value will be applied regardless
* of where it is being set within the stylings priority structure.
*
* @codeGenApi
*/
export function ɵɵelementHostClassProp(
classIndex: number, value: boolean | PlayerFactory, forceOverride?: boolean): void {
const directiveStylingIndex = getActiveDirectiveStylingIndex();
const hostElementIndex = getSelectedIndex();
const stylingContext = getStylingContext(hostElementIndex, getLView());
const input = (value instanceof BoundPlayerFactory) ?
(value as BoundPlayerFactory<boolean|null>) :
booleanOrNull(value);
const args: ParamsOf<typeof updateElementClassProp> =
[stylingContext, classIndex, input, directiveStylingIndex, forceOverride];
enqueueHostInstruction(stylingContext, directiveStylingIndex, updateElementClassProp, args);
const stylingContext = getStylingContext(index, getLView());
if (directiveStylingIndex) {
const args: ParamsOf<typeof updateElementClassProp> =
[stylingContext, classIndex, input, directiveStylingIndex, forceOverride];
enqueueHostInstruction(stylingContext, directiveStylingIndex, updateElementClassProp, args);
} else {
updateElementClassProp(
stylingContext, classIndex, input, DEFAULT_TEMPLATE_DIRECTIVE_INDEX, forceOverride);
}
}
function booleanOrNull(value: any): boolean|null {
if (typeof value === 'boolean') return value;
return value ? true : null;
@ -319,26 +229,34 @@ function booleanOrNull(value: any): boolean|null {
* Any missing styles (that have already been applied to the element beforehand) will be
* removed (unset) from the element's styling.
*
* Note that this will apply the provided styleMap value to the host element if this function
* is called within a host binding.
*
* @codeGenApi
*/
export function ɵɵelementStyleMap(styles: {[styleName: string]: any} | NO_CHANGE | null): void {
const index = getSelectedIndex();
const lView = getLView();
const stylingContext = getStylingContext(index, lView);
const tNode = getTNode(index, lView);
const directiveStylingIndex = getActiveDirectiveStylingIndex();
if (directiveStylingIndex) {
const args: ParamsOf<typeof updateStyleMap> = [stylingContext, styles, directiveStylingIndex];
enqueueHostInstruction(stylingContext, directiveStylingIndex, updateStyleMap, args);
} else {
const tNode = getTNode(index, lView);
// inputs are only evaluated from a template binding into a directive, therefore,
// there should not be a situation where a directive host bindings function
// evaluates the inputs (this should only happen in the template function)
if (hasStyleInput(tNode) && styles !== NO_CHANGE) {
const initialStyles = getInitialClassNameValue(stylingContext);
const styleInputVal =
(initialStyles.length ? (initialStyles + ' ') : '') + forceStylesAsString(styles);
setInputsForProperty(lView, tNode.inputs !['style'] !, styleInputVal);
styles = NO_CHANGE;
// inputs are only evaluated from a template binding into a directive, therefore,
// there should not be a situation where a directive host bindings function
// evaluates the inputs (this should only happen in the template function)
if (hasStyleInput(tNode) && styles !== NO_CHANGE) {
const initialStyles = getInitialClassNameValue(stylingContext);
const styleInputVal =
(initialStyles.length ? (initialStyles + ' ') : '') + forceStylesAsString(styles);
setInputsForProperty(lView, tNode.inputs !['style'] !, styleInputVal);
styles = NO_CHANGE;
}
updateStyleMap(stylingContext, styles);
}
updateStyleMap(stylingContext, styles);
}
@ -351,6 +269,8 @@ export function ɵɵelementStyleMap(styles: {[styleName: string]: any} | NO_CHAN
* classes are set to falsy then they will be removed from the element.
*
* Note that the styling instruction will not be applied until `elementStylingApply` is called.
* Note that this will the provided classMap value to the host element if this function is called
* within a host binding.
*
* @param classes A key/value map or string of CSS classes that will be added to the
* given element. Any missing classes (that have already been applied to the element
@ -363,74 +283,24 @@ export function ɵɵelementClassMap(classes: {[styleName: string]: any} | NO_CHA
const index = getSelectedIndex();
const lView = getLView();
const stylingContext = getStylingContext(index, lView);
const tNode = getTNode(index, lView);
// inputs are only evaluated from a template binding into a directive, therefore,
// there should not be a situation where a directive host bindings function
// evaluates the inputs (this should only happen in the template function)
if (hasClassInput(tNode) && classes !== NO_CHANGE) {
const initialClasses = getInitialClassNameValue(stylingContext);
const classInputVal =
(initialClasses.length ? (initialClasses + ' ') : '') + forceClassesAsString(classes);
setInputsForProperty(lView, tNode.inputs !['class'] !, classInputVal);
classes = NO_CHANGE;
const directiveStylingIndex = getActiveDirectiveStylingIndex();
if (directiveStylingIndex) {
const args: ParamsOf<typeof updateClassMap> = [stylingContext, classes, directiveStylingIndex];
enqueueHostInstruction(stylingContext, directiveStylingIndex, updateClassMap, args);
} else {
const tNode = getTNode(index, lView);
// inputs are only evaluated from a template binding into a directive, therefore,
// there should not be a situation where a directive host bindings function
// evaluates the inputs (this should only happen in the template function)
if (hasClassInput(tNode) && classes !== NO_CHANGE) {
const initialClasses = getInitialClassNameValue(stylingContext);
const classInputVal =
(initialClasses.length ? (initialClasses + ' ') : '') + forceClassesAsString(classes);
setInputsForProperty(lView, tNode.inputs !['class'] !, classInputVal);
classes = NO_CHANGE;
}
updateClassMap(stylingContext, classes);
}
updateClassMap(stylingContext, classes);
}
/**
* Update style host bindings using object literals on an element within the host
* bindings function for a directive/component.
*
* This instruction is meant to apply styling via the `@HostBinding('style')`
* host bindings for a component's or directive's host element.
* When styles are applied to the host element they will then be updated
* with respect to any other styles set with `elementHostStyleProp`. If
* If any styles are set to falsy then they will be removed from the element.
*
* Note that the styling instruction will not be applied until
* `elementHostStylingApply` is called.
*
* @param styles A key/value style map of the styles that will be applied to the given element.
* Any missing styles (that have already been applied to the element beforehand) will be
* removed (unset) from the element's styling.
*
* @codeGenApi
*/
export function ɵɵelementHostStyleMap(styles: {[styleName: string]: any} | NO_CHANGE | null): void {
const directiveStylingIndex = getActiveDirectiveStylingIndex();
const hostElementIndex = getSelectedIndex();
const stylingContext = getStylingContext(hostElementIndex, getLView());
const args: ParamsOf<typeof updateStyleMap> = [stylingContext, styles, directiveStylingIndex];
enqueueHostInstruction(stylingContext, directiveStylingIndex, updateStyleMap, args);
}
/**
* Update class host bindings using object literals on an element within the host
* bindings function for a directive/component.
*
* This instruction is meant to apply styling via the `@HostBinding('class')`
* host bindings for a component's or directive's host element.
* When classes are applied to the host element they will then be updated
* with respect to any other classes set with `elementHostClassProp`. If
* any classes are set to falsy then they will be removed from the element.
*
* Note that the styling instruction will not be applied until
* `elementHostStylingApply` is called.
*
* @param classes A key/value map or string of CSS classes that will be added to the
* given element. Any missing classes (that have already been applied to the element
* beforehand) will be removed (unset) from the element's list of CSS classes.
*
* @codeGenApi
*/
export function ɵɵelementHostClassMap(classes: {[key: string]: any} | string | NO_CHANGE | null):
void {
const directiveStylingIndex = getActiveDirectiveStylingIndex();
const hostElementIndex = getSelectedIndex();
const stylingContext = getStylingContext(hostElementIndex, getLView());
const args: ParamsOf<typeof updateClassMap> = [stylingContext, classes, directiveStylingIndex];
enqueueHostInstruction(stylingContext, directiveStylingIndex, updateClassMap, args);
}
/**
@ -444,24 +314,8 @@ export function ɵɵelementHostClassMap(classes: {[key: string]: any} | string |
*/
export function ɵɵelementStylingApply(): void {
const index = getSelectedIndex();
elementStylingApplyInternal(DEFAULT_TEMPLATE_DIRECTIVE_INDEX, index);
}
/**
* Apply all style and class host binding values to the element.
*
* This instruction is meant to be run after both `elementHostStyleMap`
* `elementHostClassMap`, `elementHostStyleProp` or `elementHostClassProp`
* instructions have been run and will only apply styling to the host
* element if any styling bindings have been updated.
*
* @codeGenApi
*/
export function ɵɵelementHostStylingApply(): void {
elementStylingApplyInternal(getActiveDirectiveStylingIndex(), getSelectedIndex());
}
export function elementStylingApplyInternal(directiveStylingIndex: number, index: number): void {
const directiveStylingIndex =
getActiveDirectiveStylingIndex() || DEFAULT_TEMPLATE_DIRECTIVE_INDEX;
const lView = getLView();
const tNode = getTNode(index, lView);

6
packages/core/src/render3/jit/environment.ts
View File

@ -112,12 +112,6 @@ export const angularCoreEnv: {[name: string]: Function} = {
'ɵɵelementStyleProp': r3.ɵɵelementStyleProp,
'ɵɵelementStylingApply': r3.ɵɵelementStylingApply,
'ɵɵelementClassProp': r3.ɵɵelementClassProp,
'ɵɵelementHostClassMap': r3.ɵɵelementHostClassMap,
'ɵɵelementHostStyling': r3.ɵɵelementHostStyling,
'ɵɵelementHostStyleMap': r3.ɵɵelementHostStyleMap,
'ɵɵelementHostStyleProp': r3.ɵɵelementHostStyleProp,
'ɵɵelementHostStylingApply': r3.ɵɵelementHostStylingApply,
'ɵɵelementHostClassProp': r3.ɵɵelementHostClassProp,
'ɵɵselect': r3.ɵɵselect,
'ɵɵtemplate': r3.ɵɵtemplate,
'ɵɵtext': r3.ɵɵtext,

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

@ -167,7 +167,7 @@ let activeDirectiveSuperClassHeight = 0;
export function setActiveHostElement(elementIndex: number | null = null) {
if (_selectedIndex !== elementIndex) {
setSelectedIndex(elementIndex == null ? -1 : elementIndex);
activeDirectiveId = MIN_DIRECTIVE_ID;
activeDirectiveId = elementIndex == null ? 0 : MIN_DIRECTIVE_ID;
activeDirectiveSuperClassDepthPosition = 0;
activeDirectiveSuperClassHeight = 0;
}

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

@ -110,6 +110,9 @@
{
"name": "IterableDiffers"
},
{
"name": "MIN_DIRECTIVE_ID"
},
{
"name": "MONKEY_PATCH_KEY_NAME"
},
@ -380,6 +383,15 @@
{
"name": "_symbolIterator"
},
{
"name": "activeDirectiveId"
},
{
"name": "activeDirectiveSuperClassDepthPosition"
},
{
"name": "activeDirectiveSuperClassHeight"
},
{
"name": "addComponentLogic"
},
@ -570,7 +582,7 @@
"name": "elementPropertyInternal"
},
{
"name": "elementStylingApplyInternal"
"name": "enqueueHostInstruction"
},
{
"name": "enterView"
@ -620,6 +632,9 @@
{
"name": "findExistingListener"
},
{
"name": "findNextInsertionIndex"
},
{
"name": "findOrPatchDirectiveIntoRegistry"
},
@ -641,6 +656,15 @@
{
"name": "generatePropertyAliases"
},
{
"name": "getActiveDirectiveId"
},
{
"name": "getActiveDirectiveStylingIndex"
},
{
"name": "getActiveDirectiveSuperClassDepth"
},
{
"name": "getBeforeNodeForView"
},
@ -1124,6 +1148,9 @@
{
"name": "refreshDynamicEmbeddedViews"
},
{
"name": "registerHostDirective"
},
{
"name": "registerMultiMapEntry"
},

40
packages/core/test/render3/integration_spec.ts
View File

@ -10,8 +10,8 @@ import {ElementRef, TemplateRef, ViewContainerRef} from '@angular/core';
import {RendererType2} from '../../src/render/api';
import {getLContext} from '../../src/render3/context_discovery';
import {AttributeMarker, ɵɵdefineComponent, ɵɵdefineDirective, ɵɵelementClassMap, ɵɵelementHostClassMap, ɵɵelementHostStyleMap, ɵɵelementStyleMap, ɵɵtemplateRefExtractor} from '../../src/render3/index';
import {ɵɵallocHostVars, ɵɵbind, ɵɵcontainer, ɵɵcontainerRefreshEnd, ɵɵcontainerRefreshStart, ɵɵdirectiveInject, ɵɵelement, ɵɵelementAttribute, ɵɵelementClassProp, ɵɵelementContainerEnd, ɵɵelementContainerStart, ɵɵelementEnd, ɵɵelementHostAttrs, ɵɵelementHostClassProp, ɵɵelementHostStyleProp, ɵɵelementHostStyling, ɵɵelementHostStylingApply, ɵɵelementProperty, ɵɵelementStart, ɵɵelementStyleProp, ɵɵelementStyling, ɵɵelementStylingApply, ɵɵembeddedViewEnd, ɵɵembeddedViewStart, ɵɵinterpolation1, ɵɵinterpolation2, ɵɵinterpolation3, ɵɵinterpolation4, ɵɵinterpolation5, ɵɵinterpolation6, ɵɵinterpolation7, ɵɵinterpolation8, ɵɵinterpolationV, ɵɵprojection, ɵɵprojectionDef, ɵɵreference, ɵɵselect, ɵɵtemplate, ɵɵtext, ɵɵtextBinding} from '../../src/render3/instructions/all';
import {AttributeMarker, ɵɵdefineComponent, ɵɵdefineDirective, ɵɵelementClassMap, ɵɵelementStyleMap, ɵɵtemplateRefExtractor} from '../../src/render3/index';
import {ɵɵallocHostVars, ɵɵbind, ɵɵcontainer, ɵɵcontainerRefreshEnd, ɵɵcontainerRefreshStart, ɵɵdirectiveInject, ɵɵelement, ɵɵelementAttribute, ɵɵelementClassProp, ɵɵelementContainerEnd, ɵɵelementContainerStart, ɵɵelementEnd, ɵɵelementHostAttrs, ɵɵelementProperty, ɵɵelementStart, ɵɵelementStyleProp, ɵɵelementStyling, ɵɵelementStylingApply, ɵɵembeddedViewEnd, ɵɵembeddedViewStart, ɵɵinterpolation1, ɵɵinterpolation2, ɵɵinterpolation3, ɵɵinterpolation4, ɵɵinterpolation5, ɵɵinterpolation6, ɵɵinterpolation7, ɵɵinterpolation8, ɵɵinterpolationV, ɵɵprojection, ɵɵprojectionDef, ɵɵreference, ɵɵselect, ɵɵtemplate, ɵɵtext, ɵɵtextBinding} from '../../src/render3/instructions/all';
import {MONKEY_PATCH_KEY_NAME} from '../../src/render3/interfaces/context';
import {RenderFlags} from '../../src/render3/interfaces/definition';
import {RElement, Renderer3, RendererFactory3, domRendererFactory3} from '../../src/render3/interfaces/renderer';
@ -1830,13 +1830,13 @@ describe('render3 integration test', () => {
if (rf & RenderFlags.Create) {
ɵɵelementHostAttrs(
[AttributeMarker.Classes, 'def', AttributeMarker.Styles, 'width', '555px']);
ɵɵelementHostStyling(['xyz'], ['width', 'height']);
ɵɵelementStyling(['xyz'], ['width', 'height']);
}
if (rf & RenderFlags.Update) {
ɵɵelementHostStyleProp(0, ctx.width);
ɵɵelementHostStyleProp(1, ctx.height);
ɵɵelementHostClassProp(0, ctx.activateXYZClass);
ɵɵelementHostStylingApply();
ɵɵelementStyleProp(0, ctx.width);
ɵɵelementStyleProp(1, ctx.height);
ɵɵelementClassProp(0, ctx.activateXYZClass);
ɵɵelementStylingApply();
}
}
});
@ -1903,11 +1903,11 @@ describe('render3 integration test', () => {
factory: () => dir1Instance = new Dir1WithStyle(),
hostBindings: function(rf: RenderFlags, ctx: Dir1WithStyle, elementIndex: number) {
if (rf & RenderFlags.Create) {
ɵɵelementHostStyling(null, ['width']);
ɵɵelementStyling(null, ['width']);
}
if (rf & RenderFlags.Update) {
ɵɵelementHostStyleProp(0, ctx.width);
ɵɵelementHostStylingApply();
ɵɵelementStyleProp(0, ctx.width);
ɵɵelementStylingApply();
}
}
});
@ -1928,11 +1928,11 @@ describe('render3 integration test', () => {
hostBindings: function(rf: RenderFlags, ctx: Dir2WithStyle, elementIndex: number) {
if (rf & RenderFlags.Create) {
ɵɵelementHostAttrs([AttributeMarker.Styles, 'width', '111px']);
ɵɵelementHostStyling(null, ['width']);
ɵɵelementStyling(null, ['width']);
}
if (rf & RenderFlags.Update) {
ɵɵelementHostStyleProp(0, ctx.width);
ɵɵelementHostStylingApply();
ɵɵelementStyleProp(0, ctx.width);
ɵɵelementStylingApply();
}
}
});
@ -2001,12 +2001,12 @@ describe('render3 integration test', () => {
factory: () => dir1Instance = new Dir1WithStyling(),
hostBindings: function(rf: RenderFlags, ctx: Dir1WithStyling, elementIndex: number) {
if (rf & RenderFlags.Create) {
ɵɵelementHostStyling();
ɵɵelementStyling();
}
if (rf & RenderFlags.Update) {
ɵɵelementHostStyleMap(ctx.stylesExp);
ɵɵelementHostClassMap(ctx.classesExp);
ɵɵelementHostStylingApply();
ɵɵelementStyleMap(ctx.stylesExp);
ɵɵelementClassMap(ctx.classesExp);
ɵɵelementStylingApply();
}
}
});
@ -2029,11 +2029,11 @@ describe('render3 integration test', () => {
hostBindings: function(rf: RenderFlags, ctx: Dir2WithStyling, elementIndex: number) {
if (rf & RenderFlags.Create) {
ɵɵelementHostAttrs([AttributeMarker.Styles, 'width', '111px']);
ɵɵelementHostStyling();
ɵɵelementStyling();
}
if (rf & RenderFlags.Update) {
ɵɵelementHostStyleMap(ctx.stylesExp);
ɵɵelementHostStylingApply();
ɵɵelementStyleMap(ctx.stylesExp);
ɵɵelementStylingApply();
}
}
});

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

@ -9,7 +9,7 @@ import {createLView, createTView} from '@angular/core/src/render3/instructions/s
import {createRootContext} from '../../../src/render3/component';
import {getLContext} from '../../../src/render3/context_discovery';
import {ɵɵdefineComponent, ɵɵdefineDirective, ɵɵelementClassMap, ɵɵelementClassProp, ɵɵelementEnd, ɵɵelementHostClassProp, ɵɵelementHostStyleProp, ɵɵelementHostStyling, ɵɵelementHostStylingApply, ɵɵelementStart, ɵɵelementStyleMap, ɵɵelementStyleProp, ɵɵelementStyling, ɵɵelementStylingApply, ɵɵnamespaceSVG, ɵɵselect} from '../../../src/render3/index';
import {ɵɵdefineComponent, ɵɵdefineDirective, ɵɵelementClassMap, ɵɵelementClassProp, ɵɵelementEnd, ɵɵelementStart, ɵɵelementStyleMap, ɵɵelementStyleProp, ɵɵelementStyling, ɵɵelementStylingApply, ɵɵnamespaceSVG, ɵɵselect} from '../../../src/render3/index';
import {RenderFlags} from '../../../src/render3/interfaces/definition';
import {AttributeMarker, TAttributes} from '../../../src/render3/interfaces/node';
import {BindingStore, BindingType, PlayState, Player, PlayerContext, PlayerFactory, PlayerHandler} from '../../../src/render3/interfaces/player';
@ -3257,12 +3257,12 @@ describe('style and class based bindings', () => {
factory: () => new MyDir(),
hostBindings: function(rf: RenderFlags, ctx: MyDir, elementIndex: number) {
if (rf & RenderFlags.Create) {
ɵɵelementHostStyling(['foo'], ['width']);
ɵɵelementStyling(['foo'], ['width']);
}
if (rf & RenderFlags.Update) {
ɵɵelementHostStyleProp(0, ctx.widthFactory);
ɵɵelementHostClassProp(0, ctx.fooFactory);
ɵɵelementHostStylingApply();
ɵɵelementStyleProp(0, ctx.widthFactory);
ɵɵelementClassProp(0, ctx.fooFactory);
ɵɵelementStylingApply();
}
}
});

16
tools/public_api_guard/core/core.d.ts vendored
View File

@ -809,22 +809,6 @@ export declare function ɵɵelementEnd(): void;
export declare function ɵɵelementHostAttrs(attrs: TAttributes): void;
export declare function ɵɵelementHostClassMap(classes: {
[key: string]: any;
} | string | NO_CHANGE | null): void;
export declare function ɵɵelementHostClassProp(classIndex: number, value: boolean | PlayerFactory, forceOverride?: boolean): void;
export declare function ɵɵelementHostStyleMap(styles: {
[styleName: string]: any;
} | NO_CHANGE | null): void;
export declare function ɵɵelementHostStyleProp(styleIndex: number, value: string | number | String | PlayerFactory | null, suffix?: string | null, forceOverride?: boolean): void;
export declare function ɵɵelementHostStyling(classBindingNames?: string[] | null, styleBindingNames?: string[] | null, styleSanitizer?: StyleSanitizeFn | null): void;
export declare function ɵɵelementHostStylingApply(): void;
export declare function ɵɵelementProperty<T>(index: number, propName: string, value: T | NO_CHANGE, sanitizer?: SanitizerFn | null, nativeOnly?: boolean): void;
export declare function ɵɵelementStart(index: number, name: string, attrs?: TAttributes | null, localRefs?: string[] | null): void;