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

fix(ivy): don't cache render parent on LContainer to support ngUpgrade (#28011) 

PR Close #28011
This commit is contained in:
Pawel Kozlowski 2019-01-09 14:20:19 +01:00 committed by Andrew Kushnir
parent 1f904bffbc
commit 6beeb76ac0
2 changed files with 110 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/core/src/render3/node_manipulation.ts
View File

@ -52,9 +52,9 @@ export function getLContainer(tNode: TViewNode, embeddedView: LView): LContainer
* Retrieves render parent for a given view. * Retrieves render parent for a given view.
* Might be null if a view is not yet attached to any container. * Might be null if a view is not yet attached to any container.
*/ */
export function getContainerRenderParent(tViewNode: TViewNode, view: LView): RElement|null { function getContainerRenderParent(tViewNode: TViewNode, view: LView): RElement|null {
const container = getLContainer(tViewNode, view); const container = getLContainer(tViewNode, view);
return container ? container[RENDER_PARENT] : null; return container ? nativeParentNode(view[RENDERER], container[NATIVE]) : null;
} }
const enum WalkTNodeTreeAction { const enum WalkTNodeTreeAction {

225
packages/upgrade/test/static/integration/upgrade_component_spec.ts
View File

@ -2134,76 +2134,72 @@ withEachNg1Version(() => {
}); });
describe('transclusion', () => { describe('transclusion', () => {
fixmeIvy(`FW-863: Error: Failed to execute 'insertBefore' on 'Node'`) it('should support single-slot transclusion', async(() => {
.it('should support single-slot transclusion', async(() => { let ng2ComponentAInstance: Ng2ComponentA;
let ng2ComponentAInstance: Ng2ComponentA; let ng2ComponentBInstance: Ng2ComponentB;
let ng2ComponentBInstance: Ng2ComponentB;
// Define `ng1Component` // Define `ng1Component`
const ng1Component: angular.IComponent = { const ng1Component:
template: 'ng1(<div ng-transclude></div>)', angular.IComponent = {template: 'ng1(<div ng-transclude></div>)', transclude: true};
transclude: true
};
// Define `Ng1ComponentFacade` // Define `Ng1ComponentFacade`
@Directive({selector: 'ng1'}) @Directive({selector: 'ng1'})
class Ng1ComponentFacade extends UpgradeComponent { class Ng1ComponentFacade extends UpgradeComponent {
constructor(elementRef: ElementRef, injector: Injector) { constructor(elementRef: ElementRef, injector: Injector) {
super('ng1', elementRef, injector); super('ng1', elementRef, injector);
} }
} }
// Define `Ng2Component` // Define `Ng2Component`
@Component({ @Component({
selector: 'ng2A', selector: 'ng2A',
template: 'ng2A(<ng1>{{ value }} | <ng2B *ngIf="showB"></ng2B></ng1>)' template: 'ng2A(<ng1>{{ value }} | <ng2B *ngIf="showB"></ng2B></ng1>)'
}) })
class Ng2ComponentA { class Ng2ComponentA {
value = 'foo'; value = 'foo';
showB = false; showB = false;
constructor() { ng2ComponentAInstance = this; } constructor() { ng2ComponentAInstance = this; }
} }
@Component({selector: 'ng2B', template: 'ng2B({{ value }})'}) @Component({selector: 'ng2B', template: 'ng2B({{ value }})'})
class Ng2ComponentB { class Ng2ComponentB {
value = 'bar'; value = 'bar';
constructor() { ng2ComponentBInstance = this; } constructor() { ng2ComponentBInstance = this; }
} }
// Define `ng1Module` // Define `ng1Module`
const ng1Module = const ng1Module = angular.module('ng1Module', [])
angular.module('ng1Module', []) .component('ng1', ng1Component)
.component('ng1', ng1Component) .directive('ng2A', downgradeComponent({component: Ng2ComponentA}));
.directive('ng2A', downgradeComponent({component: Ng2ComponentA}));
// Define `Ng2Module` // Define `Ng2Module`
@NgModule({ @NgModule({
imports: [BrowserModule, UpgradeModule], imports: [BrowserModule, UpgradeModule],
declarations: [Ng1ComponentFacade, Ng2ComponentA, Ng2ComponentB], declarations: [Ng1ComponentFacade, Ng2ComponentA, Ng2ComponentB],
entryComponents: [Ng2ComponentA] entryComponents: [Ng2ComponentA]
}) })
class Ng2Module { class Ng2Module {
ngDoBootstrap() {} ngDoBootstrap() {}
} }
// Bootstrap // Bootstrap
const element = html(`<ng2-a></ng2-a>`); const element = html(`<ng2-a></ng2-a>`);
bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(adapter => { bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(adapter => {
expect(multiTrim(element.textContent)).toBe('ng2A(ng1(foo | ))'); expect(multiTrim(element.textContent)).toBe('ng2A(ng1(foo | ))');
ng2ComponentAInstance.value = 'baz'; ng2ComponentAInstance.value = 'baz';
ng2ComponentAInstance.showB = true; ng2ComponentAInstance.showB = true;
$digest(adapter); $digest(adapter);
expect(multiTrim(element.textContent)).toBe('ng2A(ng1(baz | ng2B(bar)))'); expect(multiTrim(element.textContent)).toBe('ng2A(ng1(baz | ng2B(bar)))');
ng2ComponentBInstance.value = 'qux'; ng2ComponentBInstance.value = 'qux';
$digest(adapter); $digest(adapter);
expect(multiTrim(element.textContent)).toBe('ng2A(ng1(baz | ng2B(qux)))'); expect(multiTrim(element.textContent)).toBe('ng2A(ng1(baz | ng2B(qux)))');
}); });
})); }));
it('should support single-slot transclusion with fallback content', async(() => { it('should support single-slot transclusion with fallback content', async(() => {
let ng1ControllerInstances: any[] = []; let ng1ControllerInstances: any[] = [];
@ -2530,29 +2526,28 @@ withEachNg1Version(() => {
}); });
})); }));
fixmeIvy(`FW-863: Error: Failed to execute 'insertBefore' on 'Node'`) it('should support structural directives in transcluded content', async(() => {
.it('should support structural directives in transcluded content', async(() => { let ng2ComponentInstance: Ng2Component;
let ng2ComponentInstance: Ng2Component;
// Define `ng1Component` // Define `ng1Component`
const ng1Component: angular.IComponent = { const ng1Component: angular.IComponent = {
template: template:
'ng1(x(<div ng-transclude="slotX"></div>) | default(<div ng-transclude=""></div>))', 'ng1(x(<div ng-transclude="slotX"></div>) | default(<div ng-transclude=""></div>))',
transclude: {slotX: 'contentX'} transclude: {slotX: 'contentX'}
}; };
// Define `Ng1ComponentFacade` // Define `Ng1ComponentFacade`
@Directive({selector: 'ng1'}) @Directive({selector: 'ng1'})
class Ng1ComponentFacade extends UpgradeComponent { class Ng1ComponentFacade extends UpgradeComponent {
constructor(elementRef: ElementRef, injector: Injector) { constructor(elementRef: ElementRef, injector: Injector) {
super('ng1', elementRef, injector); super('ng1', elementRef, injector);
} }
} }
// Define `Ng2Component` // Define `Ng2Component`
@Component({ @Component({
selector: 'ng2', selector: 'ng2',
template: ` template: `
ng2( ng2(
<ng1> <ng1>
<content-x><div *ngIf="show">{{ x }}1</div></content-x> <content-x><div *ngIf="show">{{ x }}1</div></content-x>
@ -2561,53 +2556,49 @@ withEachNg1Version(() => {
<div *ngIf="show">{{ y }}2</div> <div *ngIf="show">{{ y }}2</div>
</ng1> </ng1>
)` )`
}) })
class Ng2Component { class Ng2Component {
x = 'foo'; x = 'foo';
y = 'bar'; y = 'bar';
show = true; show = true;
constructor() { ng2ComponentInstance = this; } constructor() { ng2ComponentInstance = this; }
} }
// Define `ng1Module` // Define `ng1Module`
const ng1Module = const ng1Module = angular.module('ng1Module', [])
angular.module('ng1Module', []) .component('ng1', ng1Component)
.component('ng1', ng1Component) .directive('ng2', downgradeComponent({component: Ng2Component}));
.directive('ng2', downgradeComponent({component: Ng2Component}));
// Define `Ng2Module` // Define `Ng2Module`
@NgModule({ @NgModule({
imports: [BrowserModule, UpgradeModule], imports: [BrowserModule, UpgradeModule],
declarations: [Ng1ComponentFacade, Ng2Component], declarations: [Ng1ComponentFacade, Ng2Component],
entryComponents: [Ng2Component], entryComponents: [Ng2Component],
schemas: [NO_ERRORS_SCHEMA] schemas: [NO_ERRORS_SCHEMA]
}) })
class Ng2Module { class Ng2Module {
ngDoBootstrap() {} ngDoBootstrap() {}
} }
// Bootstrap // Bootstrap
const element = html(`<ng2></ng2>`); const element = html(`<ng2></ng2>`);
bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(adapter => { bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(adapter => {
expect(multiTrim(element.textContent, true)) expect(multiTrim(element.textContent, true)).toBe('ng2(ng1(x(foo1)|default(bar2)))');
.toBe('ng2(ng1(x(foo1)|default(bar2)))');
ng2ComponentInstance.x = 'baz'; ng2ComponentInstance.x = 'baz';
ng2ComponentInstance.y = 'qux'; ng2ComponentInstance.y = 'qux';
ng2ComponentInstance.show = false; ng2ComponentInstance.show = false;
$digest(adapter); $digest(adapter);
expect(multiTrim(element.textContent, true)) expect(multiTrim(element.textContent, true)).toBe('ng2(ng1(x(baz2)|default(qux1)))');
.toBe('ng2(ng1(x(baz2)|default(qux1)))');
ng2ComponentInstance.show = true; ng2ComponentInstance.show = true;
$digest(adapter); $digest(adapter);
expect(multiTrim(element.textContent, true)) expect(multiTrim(element.textContent, true)).toBe('ng2(ng1(x(baz1)|default(qux2)))');
.toBe('ng2(ng1(x(baz1)|default(qux2)))'); });
}); }));
}));
}); });
describe('lifecycle hooks', () => { describe('lifecycle hooks', () => {