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

feat(ivy): adding support for ngNonBindable attribute

This commit is contained in:
Andrew Kushnir 2018-09-26 13:19:04 -07:00 committed by Alex Rickabaugh
parent eeebe28c0f
commit b286abeabe
9 changed files with 256 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
packages/compiler-cli/test/compliance/r3_view_compiler_binding_spec.ts
View File

@ -122,4 +122,83 @@ describe('compiler compliance: bindings', () => {
});
});
describe('non bindable behaviour', () => {
const getAppFiles = (template: string = ''): MockDirectory => ({
app: {
'example.ts': `
import {Component, NgModule} from '@angular/core';
@Component({
selector: 'my-app',
template: \`${template}\`
})
export class MyComponent {
name = 'John Doe';
}
@NgModule({declarations: [MyComponent]})
export class MyModule {}`
}
});
it('should keep local ref for host element', () => {
const files: MockDirectory = getAppFiles(`
<b ngNonBindable #myRef id="my-id">
<i>Hello {{ name }}!</i>
</b>
{{ myRef.id }}
`);
const template = `
const $_c0$ = ["id", "my-id"];
const $_c1$ = ["myRef", ""];
…
template:function MyComponent_Template(rf, $ctx$){
if (rf & 1) {
$i0$.ɵelementStart(0, "b", $_c0$, $_c1$);
$i0$.ɵsetBindingsDisabled();
$i0$.ɵelementStart(2, "i");
$i0$.ɵtext(3, "Hello {{ name }}!");
$i0$.ɵelementEnd();
$i0$.ɵsetBindingsEnabled();
$i0$.ɵelementEnd();
$i0$.ɵtext(4);
}
if (rf & 2) {
const $_r0$ = $i0$.ɵreference(1);
$i0$.ɵtextBinding(4, $i0$.ɵinterpolation1(" ", $_r0$.id, " "));
}
}
`;
const result = compile(files, angularFiles);
expectEmit(result.source, template,
'Incorrect handling of local refs for host element');
});
it('should not have local refs for nested elements', () => {
const files: MockDirectory = getAppFiles(`
<div ngNonBindable>
<input value="one" #myInput> {{ myInput.value }}
</div>
`);
const template = `
const $_c0$ = ["value", "one", "#myInput", ""];
…
template:function MyComponent_Template(rf, $ctx$){
if (rf & 1) {
$i0$.ɵelementStart(0, "div");
$i0$.ɵsetBindingsDisabled();
$i0$.ɵelement(1, "input", $_c0$);
$i0$.ɵtext(2, " {{ myInput.value }} ");
$i0$.ɵsetBindingsEnabled();
$i0$.ɵelementEnd();
}
`;
const result = compile(files, angularFiles);
expectEmit(result.source, template,
'Incorrect handling of local refs for nested elements');
});
});
});

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

@ -60,6 +60,10 @@ export class Identifiers {
static bind: o.ExternalReference = {name: 'ɵbind', moduleName: CORE};
static setBindingsEnabled: o.ExternalReference = {name: 'ɵsetBindingsEnabled', moduleName: CORE};
static setBindingsDisabled: o.ExternalReference = {name: 'ɵsetBindingsDisabled', moduleName: CORE};
static getCurrentView: o.ExternalReference = {name: 'ɵgetCurrentView', moduleName: CORE};
static restoreView: o.ExternalReference = {name: 'ɵrestoreView', moduleName: CORE};

17
packages/compiler/src/render3/view/template.ts
View File

@ -30,7 +30,7 @@ import {htmlAstToRender3Ast} from '../r3_template_transform';
import {R3QueryMetadata} from './api';
import {parseStyle} from './styling';
import {CONTEXT_NAME, I18N_ATTR, I18N_ATTR_PREFIX, ID_SEPARATOR, IMPLICIT_REFERENCE, MEANING_SEPARATOR, REFERENCE_PREFIX, RENDER_FLAGS, asLiteral, invalid, isI18NAttribute, mapToExpression, trimTrailingNulls, unsupported} from './util';
import {CONTEXT_NAME, NON_BINDABLE_ATTR, I18N_ATTR, I18N_ATTR_PREFIX, ID_SEPARATOR, IMPLICIT_REFERENCE, MEANING_SEPARATOR, REFERENCE_PREFIX, RENDER_FLAGS, asLiteral, invalid, isI18NAttribute, mapToExpression, trimTrailingNulls, unsupported} from './util';
function mapBindingToInstruction(type: BindingType): o.ExternalReference|undefined {
switch (type) {
@ -304,11 +304,15 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
this._phToNodeIdxes[this._i18nSectionIndex][phName].push(elementIndex);
}
let isNonBindableMode: boolean = false;
// Handle i18n attributes
for (const attr of element.attributes) {
const name = attr.name;
const value = attr.value;
if (name === I18N_ATTR) {
if (name === NON_BINDABLE_ATTR) {
isNonBindableMode = true;
} else if (name === I18N_ATTR) {
if (this._inI18nSection) {
throw new Error(
`Could not mark an element as translatable inside of a translatable section`);
@ -487,6 +491,10 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
element.sourceSpan, isNgContainer ? R3.elementContainerStart : R3.elementStart,
trimTrailingNulls(parameters));
if (isNonBindableMode) {
this.creationInstruction(element.sourceSpan, R3.setBindingsDisabled);
}
// initial styling for static style="..." attributes
if (hasStylingInstructions) {
const paramsList: (o.Expression)[] = [];
@ -652,6 +660,11 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
if (!createSelfClosingInstruction) {
// Finish element construction mode.
if (isNonBindableMode) {
this.creationInstruction(
element.endSourceSpan || element.sourceSpan,
R3.setBindingsEnabled);
}
this.creationInstruction(
element.endSourceSpan || element.sourceSpan,
isNgContainer ? R3.elementContainerEnd : R3.elementEnd);

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

@ -35,6 +35,9 @@ export const I18N_ATTR_PREFIX = 'i18n-';
export const MEANING_SEPARATOR = '|';
export const ID_SEPARATOR = '@@';
/** Non bindable attribute name **/
export const NON_BINDABLE_ATTR = 'ngNonBindable';
/**
* Creates an allocator for a temporary variable.
*

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

@ -84,6 +84,8 @@ export {
elementProperty as ɵelementProperty,
projectionDef as ɵprojectionDef,
reference as ɵreference,
setBindingsEnabled as ɵsetBindingsEnabled,
setBindingsDisabled as ɵsetBindingsDisabled,
elementAttribute as ɵelementAttribute,
elementStyling as ɵelementStyling,
elementStylingMap as ɵelementStylingMap,

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

@ -67,6 +67,9 @@ export {
namespaceMathML,
namespaceSVG,
setBindingsEnabled,
setBindingsDisabled,
projection,
projectionDef,

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

@ -99,6 +99,8 @@ export function getCurrentSanitizer(): Sanitizer|null {
*/
let elementDepthCount !: number;
let bindingsEnabled !: boolean;
/**
* Returns the current OpaqueViewState instance.
*
@ -538,6 +540,7 @@ export function resetComponentState() {
isParent = false;
previousOrParentTNode = null !;
elementDepthCount = 0;
bindingsEnabled = true;
}
/**
@ -862,6 +865,7 @@ function nativeNodeLocalRefExtractor(tNode: TNode, currentView: LViewData): RNod
function createDirectivesAndLocals(
localRefs: string[] | null | undefined,
localRefExtractor: LocalRefExtractor = nativeNodeLocalRefExtractor) {
if (!bindingsEnabled) return;
if (firstTemplatePass) {
ngDevMode && ngDevMode.firstTemplatePass++;
cacheMatchingDirectivesForNode(previousOrParentTNode, tView, localRefs || null);
@ -1394,6 +1398,22 @@ export function elementProperty<T>(
}
}
/**
* Enables bindings processing for further instructions
* (used while processing "ngNonBindable" element's attribute).
*/
export function setBindingsEnabled(): void {
bindingsEnabled = true;
}
/**
* Disables bindings processing for further instructions
* (used while processing "ngNonBindable" element's attribute).
*/
export function setBindingsDisabled(): void {
bindingsEnabled = false;
}
/**
* Constructs a TNode object from the arguments.
*

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

@ -46,6 +46,8 @@ export const angularCoreEnv: {[name: string]: Function} = {
'ɵnamespaceHTML': r3.namespaceHTML,
'ɵnamespaceMathML': r3.namespaceMathML,
'ɵnamespaceSVG': r3.namespaceSVG,
'ɵsetBindingsEnabled': r3.setBindingsEnabled,
'ɵsetBindingsDisabled': r3.setBindingsDisabled,
'ɵelementStart': r3.elementStart,
'ɵelementEnd': r3.elementEnd,
'ɵelement': r3.element,

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

@ -7,12 +7,12 @@
*/
import {ElementRef, TemplateRef, ViewContainerRef} from '@angular/core';
import {RenderFlags} from '@angular/core/src/render3';
import {reference, RenderFlags} from '@angular/core/src/render3';
import {RendererStyleFlags2, RendererType2} from '../../src/render/api';
import {AttributeMarker, defineComponent, defineDirective} from '../../src/render3/index';
import {NO_CHANGE, bind, container, containerRefreshEnd, containerRefreshStart, element, elementAttribute, elementClassProp, elementContainerEnd, elementContainerStart, elementEnd, elementProperty, elementStart, elementStyleProp, elementStyling, elementStylingApply, embeddedViewEnd, embeddedViewStart, interpolation1, interpolation2, interpolation3, interpolation4, interpolation5, interpolation6, interpolation7, interpolation8, interpolationV, listener, load, loadDirective, projection, projectionDef, text, textBinding, template} from '../../src/render3/instructions';
import {NO_CHANGE, bind, container, containerRefreshEnd, containerRefreshStart, element, elementAttribute, elementClassProp, elementContainerEnd, elementContainerStart, elementEnd, elementProperty, elementStart, elementStyleProp, elementStyling, elementStylingApply, embeddedViewEnd, embeddedViewStart, setBindingsEnabled, setBindingsDisabled, interpolation1, interpolation2, interpolation3, interpolation4, interpolation5, interpolation6, interpolation7, interpolation8, interpolationV, listener, load, loadDirective, projection, projectionDef, text, textBinding, template} from '../../src/render3/instructions';
import {InitialStylingFlags} from '../../src/render3/interfaces/definition';
import {RElement, Renderer3, RendererFactory3, domRendererFactory3, RText, RComment, RNode, RendererStyleFlags3, ProceduralRenderer3} from '../../src/render3/interfaces/renderer';
import {HEADER_OFFSET, CONTEXT, DIRECTIVES} from '../../src/render3/interfaces/view';
@ -132,6 +132,132 @@ describe('render3 integration test', () => {
});
describe('ngNonBindable handling', () => {
it('should keep local ref for host element', () => {
/**
* <b ngNonBindable #myRef id="my-id">
* <i>Hello {{ name }}!</i>
* </b>
* {{ myRef.id }}
*/
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'b', ['id', 'my-id'], ['myRef', '']);
setBindingsDisabled();
elementStart(2, 'i');
text(3, 'Hello {{ name }}!');
elementEnd();
setBindingsEnabled();
elementEnd();
text(4);
}
if (rf & RenderFlags.Update) {
const ref = reference(1) as any;
textBinding(4, interpolation1(" ", ref.id, " "));
}
}, 5, 1);
const fixture = new ComponentFixture(App);
expect(fixture.html).toEqual('<b id="my-id"><i>Hello {{ name }}!</i></b> my-id ');
});
it('should not have local refs for nested elements', () => {
/**
* <div ngNonBindable>
* <input value="one" #myInput> {{ myInput.value }}
* </div>
*/
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'div');
setBindingsDisabled();
element(1, 'input', ['value', 'one']);
text(2, '{{ myInput.value }}');
setBindingsEnabled();
elementEnd();
}
}, 3, 0);
const fixture = new ComponentFixture(App);
expect(fixture.html).toEqual('<div><input value="one">{{ myInput.value }}</div>');
});
it('should invoke directives for host element', () => {
let directiveInvoked: boolean = false;
class TestDirective {
ngOnInit() {
directiveInvoked = true;
}
static ngDirectiveDef = defineDirective({
type: TestDirective,
selectors: [['', 'directive', '']],
factory: () => new TestDirective()
});
}
/**
* <b ngNonBindable directive>
* <i>Hello {{ name }}!</i>
* </b>
*/
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'b', ['directive', '']);
setBindingsDisabled();
elementStart(1, 'i');
text(2, 'Hello {{ name }}!');
elementEnd();
setBindingsEnabled();
elementEnd();
}
}, 3, 0, [TestDirective]);
const fixture = new ComponentFixture(App);
expect(fixture.html).toEqual('<b directive=""><i>Hello {{ name }}!</i></b>');
expect(directiveInvoked).toEqual(true);
});
it('should not invoke directives for nested elements', () => {
let directiveInvoked: boolean = false;
class TestDirective {
ngOnInit() {
directiveInvoked = true;
}
static ngDirectiveDef = defineDirective({
type: TestDirective,
selectors: [['', 'directive', '']],
factory: () => new TestDirective()
});
}
/**
* <b ngNonBindable>
* <i directive>Hello {{ name }}!</i>
* </b>
*/
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'b');
setBindingsDisabled();
elementStart(1, 'i', ['directive', '']);
text(2, 'Hello {{ name }}!');
elementEnd();
setBindingsEnabled();
elementEnd();
}
}, 3, 0, [TestDirective]);
const fixture = new ComponentFixture(App);
expect(fixture.html).toEqual('<b><i directive="">Hello {{ name }}!</i></b>');
expect(directiveInvoked).toEqual(false);
});
});
describe('Siblings update', () => {
it('should handle a flat list of static/bound text nodes', () => {
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {