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);
}
}