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({