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

feat(ivy): support inputs & outputs with aliases in component decorators (#27350) 

PR Close #27350
This commit is contained in:
Olivier Combe 2018-11-30 17:45:04 +01:00 committed by Igor Minar
parent 1279a503a1
commit 2bc39860bb
4 changed files with 90 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -30,7 +30,7 @@ import {typeWithParameters} from '../util';
import {R3ComponentDef, R3ComponentMetadata, R3DirectiveDef, R3DirectiveMetadata, R3QueryMetadata} from './api';
import {StylingBuilder, StylingInstruction} from './styling';
import {BindingScope, TemplateDefinitionBuilder, ValueConverter, renderFlagCheckIfStmt} from './template';
import {CONTEXT_NAME, DefinitionMap, RENDER_FLAGS, TEMPORARY_NAME, asLiteral, conditionallyCreateMapObjectLiteral, getQueryPredicate, mapToExpression, temporaryAllocator} from './util';
import {CONTEXT_NAME, DefinitionMap, RENDER_FLAGS, TEMPORARY_NAME, asLiteral, conditionallyCreateMapObjectLiteral, getQueryPredicate, temporaryAllocator} from './util';
const EMPTY_ARRAY: any[] = [];
@ -864,4 +864,4 @@ function parseNamedProperty(name: string): {propertyName: string, unit: string}
}
}
return {propertyName, unit};
}
}

12
packages/compiler/src/render3/view/util.ts
View File

@ -8,8 +8,8 @@
import {ConstantPool} from '../../constant_pool';
import * as o from '../../output/output_ast';
import {splitAtColon} from '../../util';
import * as t from '../r3_ast';
import {R3QueryMetadata} from './api';
import {isI18nAttribute} from './i18n/util';
@ -75,9 +75,13 @@ export function conditionallyCreateMapObjectLiteral(keys: {[key: string]: string
return null;
}
export function mapToExpression(map: {[key: string]: any}, quoted = false): o.Expression {
return o.literalMap(
Object.getOwnPropertyNames(map).map(key => ({key, quoted, value: asLiteral(map[key])})));
function mapToExpression(map: {[key: string]: any}): o.Expression {
return o.literalMap(Object.getOwnPropertyNames(map).map(key => {
// canonical syntax: `dirProp: elProp`
// if there is no `:`, use dirProp = elProp
const parts = splitAtColon(key, [key, map[key]]);
return {key: parts[0], quoted: false, value: asLiteral(parts[1])};
}));
}
/**

37
packages/core/src/render3/instructions.ts
View File

@ -958,7 +958,7 @@ export function elementProperty<T>(
if (isComponent(tNode)) markDirtyIfOnPush(lView, index + HEADER_OFFSET);
if (ngDevMode) {
if (tNode.type === TNodeType.Element || tNode.type === TNodeType.Container) {
setNgReflectProperties(lView, element, tNode.type, propName, value);
setNgReflectProperties(lView, element, tNode.type, dataValue, value);
}
}
} else if (tNode.type === TNodeType.Element) {
@ -1033,20 +1033,23 @@ function setInputsForProperty(lView: LView, inputs: PropertyAliasValue, value: a
}
function setNgReflectProperties(
lView: LView, element: RElement | RComment, type: TNodeType, propName: string, value: any) {
const renderer = lView[RENDERER];
const attrName = normalizeDebugBindingName(propName);
const debugValue = normalizeDebugBindingValue(value);
if (type === TNodeType.Element) {
isProceduralRenderer(renderer) ?
renderer.setAttribute((element as RElement), attrName, debugValue) :
(element as RElement).setAttribute(attrName, debugValue);
} else if (value !== undefined) {
const value = `bindings=${JSON.stringify({[attrName]: debugValue}, null, 2)}`;
if (isProceduralRenderer(renderer)) {
renderer.setValue((element as RComment), value);
} else {
(element as RComment).textContent = value;
lView: LView, element: RElement | RComment, type: TNodeType, inputs: PropertyAliasValue,
value: any) {
for (let i = 0; i < inputs.length; i += 2) {
const renderer = lView[RENDERER];
const attrName = normalizeDebugBindingName(inputs[i + 1] as string);
const debugValue = normalizeDebugBindingValue(value);
if (type === TNodeType.Element) {
isProceduralRenderer(renderer) ?
renderer.setAttribute((element as RElement), attrName, debugValue) :
(element as RElement).setAttribute(attrName, debugValue);
} else if (value !== undefined) {
const value = `bindings=${JSON.stringify({[attrName]: debugValue}, null, 2)}`;
if (isProceduralRenderer(renderer)) {
renderer.setValue((element as RComment), value);
} else {
(element as RComment).textContent = value;
}
}
}
}
@ -1054,8 +1057,8 @@ function setNgReflectProperties(
/**
* Consolidates all inputs or outputs of all directives on this logical node.
*
* @param number tNodeFlags node flags
* @param Direction direction whether to consider inputs or outputs
* @param tNodeFlags node flags
* @param direction whether to consider inputs or outputs
* @returns PropertyAliases|null aggregate of all properties if any, `null` otherwise
*/
function generatePropertyAliases(tNode: TNode, direction: BindingDirection): PropertyAliases|null {

126
packages/core/test/linker/integration_spec.ts
View File

@ -238,44 +238,42 @@ function declareTests(config?: {useJit: boolean}) {
expect(getDOM().getProperty(nativeEl, 'htmlFor')).toBe('foo');
});
fixmeIvy('FW-587: Inputs with aliases in component decorators don\'t work')
.it('should consume directive watch expression change.', () => {
TestBed.configureTestingModule({declarations: [MyComp, MyDir]});
const template = '<span>' +
'<div my-dir [elprop]="ctxProp"></div>' +
'<div my-dir elprop="Hi there!"></div>' +
'<div my-dir elprop="Hi {{\'there!\'}}"></div>' +
'<div my-dir elprop="One more {{ctxProp}}"></div>' +
'</span>';
TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp);
it('should consume directive watch expression change.', () => {
TestBed.configureTestingModule({declarations: [MyComp, MyDir]});
const template = '<span>' +
'<div my-dir [elprop]="ctxProp"></div>' +
'<div my-dir elprop="Hi there!"></div>' +
'<div my-dir elprop="Hi {{\'there!\'}}"></div>' +
'<div my-dir elprop="One more {{ctxProp}}"></div>' +
'</span>';
TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp);
fixture.componentInstance.ctxProp = 'Hello World!';
fixture.detectChanges();
fixture.componentInstance.ctxProp = 'Hello World!';
fixture.detectChanges();
const containerSpan = fixture.debugElement.children[0];
const containerSpan = fixture.debugElement.children[0];
expect(containerSpan.children[0].injector.get(MyDir).dirProp).toEqual('Hello World!');
expect(containerSpan.children[1].injector.get(MyDir).dirProp).toEqual('Hi there!');
expect(containerSpan.children[2].injector.get(MyDir).dirProp).toEqual('Hi there!');
expect(containerSpan.children[3].injector.get(MyDir).dirProp)
.toEqual('One more Hello World!');
});
expect(containerSpan.children[0].injector.get(MyDir).dirProp).toEqual('Hello World!');
expect(containerSpan.children[1].injector.get(MyDir).dirProp).toEqual('Hi there!');
expect(containerSpan.children[2].injector.get(MyDir).dirProp).toEqual('Hi there!');
expect(containerSpan.children[3].injector.get(MyDir).dirProp)
.toEqual('One more Hello World!');
});
describe('pipes', () => {
fixmeIvy('FW-587: Inputs with aliases in component decorators don\'t work')
.it('should support pipes in bindings', () => {
TestBed.configureTestingModule({declarations: [MyComp, MyDir, DoublePipe]});
const template = '<div my-dir #dir="mydir" [elprop]="ctxProp | double"></div>';
TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp);
it('should support pipes in bindings', () => {
TestBed.configureTestingModule({declarations: [MyComp, MyDir, DoublePipe]});
const template = '<div my-dir #dir="mydir" [elprop]="ctxProp | double"></div>';
TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp);
fixture.componentInstance.ctxProp = 'a';
fixture.detectChanges();
fixture.componentInstance.ctxProp = 'a';
fixture.detectChanges();
const dir = fixture.debugElement.children[0].references !['dir'];
expect(dir.dirProp).toEqual('aa');
});
const dir = fixture.debugElement.children[0].references !['dir'];
expect(dir.dirProp).toEqual('aa');
});
});
it('should support nested components.', () => {
@ -290,21 +288,20 @@ function declareTests(config?: {useJit: boolean}) {
});
// GH issue 328 - https://github.com/angular/angular/issues/328
fixmeIvy('FW-587: Inputs with aliases in component decorators don\'t work')
.it('should support different directive types on a single node', () => {
TestBed.configureTestingModule({declarations: [MyComp, ChildComp, MyDir]});
const template = '<child-cmp my-dir [elprop]="ctxProp"></child-cmp>';
TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp);
it('should support different directive types on a single node', () => {
TestBed.configureTestingModule({declarations: [MyComp, ChildComp, MyDir]});
const template = '<child-cmp my-dir [elprop]="ctxProp"></child-cmp>';
TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp);
fixture.componentInstance.ctxProp = 'Hello World!';
fixture.detectChanges();
fixture.componentInstance.ctxProp = 'Hello World!';
fixture.detectChanges();
const tc = fixture.debugElement.children[0];
const tc = fixture.debugElement.children[0];
expect(tc.injector.get(MyDir).dirProp).toEqual('Hello World!');
expect(tc.injector.get(ChildComp).dirProp).toEqual(null);
});
expect(tc.injector.get(MyDir).dirProp).toEqual('Hello World!');
expect(tc.injector.get(ChildComp).dirProp).toEqual(null);
});
it('should support directives where a binding attribute is not given', () => {
TestBed.configureTestingModule({declarations: [MyComp, MyDir]});
@ -1688,21 +1685,20 @@ function declareTests(config?: {useJit: boolean}) {
});
describe('logging property updates', () => {
fixmeIvy('FW-587: Inputs with aliases in component decorators don\'t work')
.it('should reflect property values as attributes', () => {
TestBed.configureTestingModule({declarations: [MyComp, MyDir]});
const template = '<div>' +
'<div my-dir [elprop]="ctxProp"></div>' +
'</div>';
TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp);
it('should reflect property values as attributes', () => {
TestBed.configureTestingModule({declarations: [MyComp, MyDir]});
const template = '<div>' +
'<div my-dir [elprop]="ctxProp"></div>' +
'</div>';
TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp);
fixture.componentInstance.ctxProp = 'hello';
fixture.detectChanges();
fixture.componentInstance.ctxProp = 'hello';
fixture.detectChanges();
expect(getDOM().getInnerHTML(fixture.nativeElement))
.toContain('ng-reflect-dir-prop="hello"');
});
expect(getDOM().getInnerHTML(fixture.nativeElement))
.toContain('ng-reflect-dir-prop="hello"');
});
it(`should work with prop names containing '$'`, () => {
TestBed.configureTestingModule({declarations: [ParentCmp, SomeCmpWithInput]});
@ -1726,17 +1722,15 @@ function declareTests(config?: {useJit: boolean}) {
.toContain('"ng\-reflect\-ng\-if"\: "true"');
});
// also affected by FW-587: Inputs with aliases in component decorators don't work
fixmeIvy('FW-664: ng-reflect-* is not supported')
.it('should indicate when toString() throws', () => {
TestBed.configureTestingModule({declarations: [MyComp, MyDir]});
const template = '<div my-dir [elprop]="toStringThrow"></div>';
TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp);
it('should indicate when toString() throws', () => {
TestBed.configureTestingModule({declarations: [MyComp, MyDir]});
const template = '<div my-dir [elprop]="toStringThrow"></div>';
TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp);
fixture.detectChanges();
expect(getDOM().getInnerHTML(fixture.nativeElement)).toContain('[ERROR]');
});
fixture.detectChanges();
expect(getDOM().getInnerHTML(fixture.nativeElement)).toContain('[ERROR]');
});
});
describe('property decorators', () => {