PageRouterOutlet for @angular/router v.3

Author: vakrilov

.travis.yml

@@ -22,6 +22,7 @@ cache:
 
 install:
     - nvm install 4
+    - npm install -g typings
     - npm install -g nativescript --ignore-scripts
     - tns usage-reporting disable
     - tns error-reporting disable

nativescript-angular/common/detached-loader.ts

@@ -1,4 +1,5 @@
-import {ComponentRef, ViewContainerRef, Component, Type, ViewChild, ComponentResolver, ChangeDetectorRef, Host} from '@angular/core';
+import {ComponentRef, ComponentFactory, ViewContainerRef, Component,
+    Type, ViewChild, ComponentResolver, ChangeDetectorRef, Host} from '@angular/core';
 import trace = require("trace");
 
 type AnyComponentRef = ComponentRef<any>;
@@ -22,12 +23,12 @@ function log(message: string) {
     template: `<Placeholder #loader></Placeholder>`
 })
 export class DetachedLoader {
-    @ViewChild('loader', { read: ViewContainerRef }) containerRef: ViewContainerRef;
+    @ViewChild('loader', { read: ViewContainerRef }) childContainerRef: ViewContainerRef;
 
     private viewLoaded = false;
     private pendingLoads: PendingLoadEntry[] = [];
 
-    constructor(private compiler: ComponentResolver, private changeDetector: ChangeDetectorRef) { }
+    constructor(private compiler: ComponentResolver, private changeDetector: ChangeDetectorRef, private containerRef: ViewContainerRef) { }
 
     public ngAfterViewInit() {
         log("DetachedLoader.ngAfterViewInit");
@@ -42,7 +43,7 @@ export class DetachedLoader {
 
     private loadInLocation(componentType: Type): Promise<ComponentRef<any>> {
         return this.compiler.resolveComponent(componentType).then((componentFactory) => {
-            return this.containerRef.createComponent(componentFactory, this.containerRef.length, this.containerRef.parentInjector, null);
+            return this.childContainerRef.createComponent(componentFactory, this.childContainerRef.length, this.childContainerRef.parentInjector, null);
         }).then((compRef) => {
             log("DetachedLoader.loadInLocation component loaded -> markForCheck");
             // Component is created, buit may not be checked if we are loading 
@@ -66,7 +67,7 @@ export class DetachedLoader {
             // so that loading can conitionue.
             log("DetachedLoader.loadComponent -> markForCheck(with setTimeout())")
             setTimeout(() => this.changeDetector.markForCheck(), 0);
-            
+
             return new Promise((resolve, reject) => {
                 this.pendingLoads.push({
                     componentType: componentType,
@@ -75,4 +76,8 @@ export class DetachedLoader {
             });
         }
     }
+
+    public loadWithFactory<T>(factory: ComponentFactory<T>): ComponentRef<T> {
+        return this.containerRef.createComponent(factory, this.containerRef.length, this.containerRef.parentInjector, null);
+    }
 }

nativescript-angular/package.json

@@ -26,6 +26,7 @@
     "@angular/platform-browser-dynamic": "2.0.0-rc.2",
     "@angular/platform-server": "2.0.0-rc.2",
     "@angular/router-deprecated": "2.0.0-rc.2",
+    "@angular/router": "3.0.0-alpha.6",
     "rxjs": "5.0.0-beta.6",
     "zone.js": "^0.6.12",
     "reflect-metadata": "^0.1.3",

nativescript-angular/router-deprecated.ts

@@ -0,0 +1,5 @@
+export {
+    NS_ROUTER_PROVIDERS,
+    NS_ROUTER_DIRECTIVES,
+    routerTraceCategory
+} from "./router-deprecated/ns-router-deprecated";

nativescript-angular/router-deprecated/ns-router-deprecated.ts

@@ -0,0 +1,19 @@
+import {Type} from '@angular/core/src/facade/lang';
+import {NSRouterLink} from './ns-router-link';
+import {PageRouterOutlet} from './page-router-outlet';
+import {NSLocationStrategy} from '../router/ns-location-strategy';
+import {ROUTER_PROVIDERS} from '@angular/router-deprecated';
+import {LocationStrategy} from '@angular/common';
+import {provide} from '@angular/core';
+export {routerTraceCategory} from "../trace";
+
+export const NS_ROUTER_PROVIDERS: any[] = [
+    ROUTER_PROVIDERS,
+    NSLocationStrategy,
+    provide(LocationStrategy, {useExisting: NSLocationStrategy}),
+];
+
+export const NS_ROUTER_DIRECTIVES: Type[] = [
+    NSRouterLink,
+    PageRouterOutlet
+];

nativescript-angular/router-deprecated/ns-router-link.ts

@@ -0,0 +1,61 @@
+import {Directive, Input} from '@angular/core';
+import {isString} from '@angular/core/src/facade/lang';
+import {Router, Instruction} from '@angular/router-deprecated';
+import {routerLog} from "../trace";
+
+/**
+ * The NSRouterLink directive lets you link to specific parts of your app.
+ *
+ * Consider the following route configuration:
+ * ```
+ * @RouteConfig([
+ *   { path: '/user', component: UserCmp, as: 'User' }
+ * ]);
+ * class MyComp {}
+ * ```
+ *
+ * When linking to this `User` route, you can write:
+ *
+ * ```
+ * <a [nsRouterLink]="['./User']">link to user component</a>
+ * ```
+ *
+ * RouterLink expects the value to be an array of route names, followed by the params
+ * for that level of routing. For instance `['/Team', {teamId: 1}, 'User', {userId: 2}]`
+ * means that we want to generate a link for the `Team` route with params `{teamId: 1}`,
+ * and with a child route `User` with params `{userId: 2}`.
+ *
+ * The first route name should be prepended with `/`, `./`, or `../`.
+ * If the route begins with `/`, the router will look up the route from the root of the app.
+ * If the route begins with `./`, the router will instead look in the current component's
+ * children for the route. And if the route begins with `../`, the router will look at the
+ * current component's parent.
+ */
+@Directive({
+    selector: '[nsRouterLink]',
+    inputs: ['params: nsRouterLink'],
+    host: {
+        '(tap)': 'onTap()',
+        '[class.router-link-active]': 'isRouteActive'
+    }
+})
+export class NSRouterLink {
+    private _routeParams: any[];
+
+    // the instruction passed to the router to navigate
+    private _navigationInstruction: Instruction;
+
+    constructor(private _router: Router) { }
+
+    get isRouteActive(): boolean { return this._router.isRouteActive(this._navigationInstruction); }
+
+    set params(changes: any[]) {
+        this._routeParams = changes;
+        this._navigationInstruction = this._router.generate(this._routeParams);
+    }
+
+    onTap(): void {
+        routerLog("NSRouterLink onTap() instruction: " + JSON.stringify(this._navigationInstruction))
+        this._router.navigateByInstruction(this._navigationInstruction);
+    }
+}