From ace419d5057e12a763f9c3398e8d87c7b209f76d Mon Sep 17 00:00:00 2001 From: Andrew Date: Mon, 30 Mar 2015 14:19:30 -0600 Subject: [PATCH] test nav pushing and popping --- src/components/nav-view/test/basic/main.html | 2 - src/components/nav-view/test/basic/main.js | 83 +++++++++++++++++--- 2 files changed, 72 insertions(+), 13 deletions(-) diff --git a/src/components/nav-view/test/basic/main.html b/src/components/nav-view/test/basic/main.html index 62cb972457..0657cd457b 100644 --- a/src/components/nav-view/test/basic/main.html +++ b/src/components/nav-view/test/basic/main.html @@ -1,6 +1,4 @@ - - diff --git a/src/components/nav-view/test/basic/main.js b/src/components/nav-view/test/basic/main.js index 646920a7d4..41510076b0 100644 --- a/src/components/nav-view/test/basic/main.js +++ b/src/components/nav-view/test/basic/main.js @@ -2,42 +2,103 @@ import {bootstrap} from 'angular2/core' import {Component, Template, NgElement, Parent} from 'angular2/angular2' import {TemplateResolver} from 'angular2/src/core/compiler/template_resolver' import {Compiler} from 'angular2/src/core/compiler/compiler' -import {ElementInjector} from 'angular2/src/core/compiler/element_injector' import {EventManager} from 'angular2/src/core/events/event_manager' import {NavView} from 'ionic2/components/nav-view/nav-view' import {View} from 'ionic2/components/view/view' import {Log} from 'ionic2/util' +import {PrivateComponentLocation} from 'angular2/src/core/compiler/private_component_location' +import {PrivateComponentLoader} from 'angular2/src/core/compiler/private_component_loader' +import {DirectiveMetadataReader} from 'angular2/src/core/compiler/directive_metadata_reader' +import {ShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy' @Component({ selector: 'my-page' }) @Template({ - inline: 'Hello, inside page!' + inline: '
Hello, inside page {{num}}
' }) export class InsidePage { + constructor( + ele: NgElement, + @Parent() myPage: MyPage + ) { + console.log(myPage) + this.num = Math.random() + ele.domElement.style.backgroundColor = `rgba(255,0,0,${this.num})` + } } @Component({ selector: 'my-page', - services: [TemplateResolver, Compiler] + services: [Compiler, PrivateComponentLocation] }) @Template({ - inline: "

I'm a page!

" + inline: `

I'm a page!

+ + +
` }) -export class MyPage extends View { +export class MyPage { constructor( @NgElement() ele:NgElement, + eventManager: EventManager, compiler: Compiler, - hostElementInjector: ElementInjector, - eventManager: EventManager + location: PrivateComponentLocation, + loader: PrivateComponentLoader, + reader: DirectiveMetadataReader, + shadowDomStrategy: ShadowDomStrategy ) { - super(ele) - compiler.compile(InsidePage).then(function(protoView) { - debugger; + this.ele = ele + this.location = location + this.loader = loader + this.reader = reader + this.compiler = compiler + this.eventManager = eventManager + this.shadowDomStrategy = shadowDomStrategy + + this._children = [] + } + push() { + let childInjector = this.location._elementInjector._proto.instantiate( + /* parent */ this.location._elementInjector, + /* host */ null + ) + + let childContainer = document.createElement('div') + childContainer.classList.add('test-child-container') + this.ele.domElement.appendChild(childContainer) + + let childNgElement = new NgElement(childContainer) + childInjector._preBuiltObjects = this.location._elementInjector._preBuiltObjects + childInjector._preBuiltObjects.element = childNgElement + + let annotation = this.reader.read(InsidePage).annotation + this.compiler.compile(InsidePage).then((protoView) => { + let context = childInjector.createPrivateComponent(InsidePage, annotation); + let view = protoView.instantiate(childInjector, this.eventManager) + + view.hydrate(childInjector.getShadowDomAppInjector(), childInjector, null, context, null) + this.shadowDomStrategy.attachTemplate(childNgElement.domElement, view) + + this.location._view.componentChildViews.push(view) + this.location._view.changeDetector.addChild(view.changeDetector) + + this._children.push({ + remove() { + view.dehydrate() + childContainer.parentNode.removeChild(childContainer) + } + }) }) } -} + pop() { + var last = this._children.pop() + if (!last) return; + last.remove() + } + +} @Component({ selector: '[ion-app]' }) @Template({