diff --git a/package.json b/package.json index 39be6405a..34ae65752 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ }, "license": "MIT", "devDependencies": { - "angular2": "^2.0.0-beta.13", + "angular2": "^2.0.0-beta.17", "babel-core": "^5.8.14", "conventional-changelog": "^1.1.0", "conventional-changelog-cli": "^1.1.1", @@ -83,5 +83,9 @@ "webpack-dev-server": "1.x", "yargs": "^4.2.0", "zone.js": "^0.6.6" + }, + "dependencies": { + "rxjs": "^5.0.0-beta.6", + "zone.js": "^0.6.12" } } diff --git a/src/ng2/uiView.ts b/src/ng2/uiView.ts index b0ba28c81..ac56241e8 100755 --- a/src/ng2/uiView.ts +++ b/src/ng2/uiView.ts @@ -1,6 +1,8 @@ /** @module ng2_directives */ /** */ -import {Component, ElementRef, DynamicComponentLoader} from 'angular2/core'; -import {Injector} from "angular2/core"; +import { + Component, ComponentResolver, ComponentFactory, + ViewContainerRef, ReflectiveInjector +} from 'angular2/core'; import {provide} from "angular2/core"; import {Input} from "angular2/core"; import {ComponentRef} from "angular2/core"; @@ -17,14 +19,6 @@ import {Ng2ViewConfig} from "./viewsBuilder"; /** @hidden */ let id = 0; -const getProviders = (injector) => { - let providers = [], parentInj = injector.parent; - for (let i = 0; i < parentInj._proto.numberOfProviders; i++) { - providers.push(parentInj._proto.getProviderAtIndex(i)); - } - return providers; -}; - // These are provide()d as the string UiView.PARENT_INJECT export interface ParentUiViewInject { context: ViewContext; @@ -81,13 +75,13 @@ export interface ParentUiViewInject { */ @Component({ selector: 'ui-view, [ui-view]', - styles: [` - .done-true { - text-decoration: line-through; - color: grey; - }` - ], - template: `
`, + template: '' + // styles: [` + // .done-true { + // text-decoration: line-through; + // color: grey; + // }` + // ], // template: ` //
// @@ -100,7 +94,7 @@ export interface ParentUiViewInject { //
` }) export class UiView { - @Input() name: string; + @Input('name') name: string; @Input('ui-view') set _name(val) { this.name = val; } componentRef: ComponentRef; deregister: Function; @@ -111,9 +105,8 @@ export class UiView { constructor( public router: UIRouter, @Inject(UiView.PARENT_INJECT) public parent: ParentUiViewInject, - public dcl: DynamicComponentLoader, - public elementRef: ElementRef, - public injector: Injector + public compResolver: ComponentResolver, + public viewContainerRef: ViewContainerRef ) { } ngOnInit() { @@ -134,7 +127,7 @@ export class UiView { } disposeLast() { - if (this.componentRef) this.componentRef.dispose(); + if (this.componentRef) this.componentRef.destroy(); this.componentRef = null; } @@ -147,7 +140,7 @@ export class UiView { if (!config) return this.disposeLast(); if (!(config instanceof Ng2ViewConfig)) return; - let {uiViewData, injector, dcl, elementRef} = this; + let uiViewData = this.uiViewData; let viewDecl = config.viewDecl; // The "new" viewconfig is already applied, so exit early @@ -159,30 +152,32 @@ export class UiView { // The config may be undefined if there is nothing state currently targeting this UiView. if (!config) return; - // Do some magic + // Map resolves to "useValue providers" let rc = config.node.resolveContext; let resolvables = rc.getResolvables(); let rawProviders = Object.keys(resolvables).map(key => provide(key, { useValue: resolvables[key].data })); rawProviders.push(provide(UiView.PARENT_INJECT, { useValue: { context: config.viewDecl.$context, fqn: uiViewData.fqn } })); - let providers = Injector.resolve(rawProviders); - let exclusions = [UiView.PARENT_INJECT]; - providers = getProviders(injector).filter(x => exclusions.indexOf(x.key.displayName) === -1).concat(providers); + // Get the component class from the view declaration. TODO: allow promises? + let componentType = viewDecl.component; - let component = viewDecl.component; - dcl.loadIntoLocation(component, elementRef, "content", providers).then(ref => { - this.componentRef = ref; + let createComponent = (factory: ComponentFactory) => { + let parentInjector = this.viewContainerRef.injector; + let childInjector = ReflectiveInjector.resolveAndCreate(rawProviders, parentInjector); + let ref = this.componentRef = this.viewContainerRef.createComponent(factory, undefined, childInjector); // TODO: wire uiCanExit and uiOnParamsChanged callbacks - // Set resolve data to matching @Input("prop") - let inputs = ng2ComponentInputs(component); + // Supply resolve data to matching @Input('prop') or inputs: ['prop'] + let inputs = ng2ComponentInputs(componentType); let bindings = viewDecl['bindings'] || {}; inputs.map(tuple => ({ prop: tuple.prop, resolve: bindings[tuple.prop] || tuple.resolve })) .filter(tuple => resolvables[tuple.resolve] !== undefined) .forEach(tuple => { ref.instance[tuple.prop] = resolvables[tuple.resolve].data }); - }); + }; + + this.compResolver.resolveComponent(componentType).then(createComponent); } }