Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 0892842

Browse files
author
Alexander Vakrilov
authored
Merge pull request #296 from NativeScript/router-3
PageRouterOutlet for @angular/router v.3
2 parents 39a26d6 + f285889 commit 0892842

34 files changed

+1273
-472
lines changed

‎.travis.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ cache:
2222

2323
install:
2424
- nvm install 4
25+
- npm install -g typings
2526
- npm install -g nativescript --ignore-scripts
2627
- tns usage-reporting disable
2728
- tns error-reporting disable

‎nativescript-angular/common/detached-loader.ts‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import {ComponentRef, ViewContainerRef, Component, Type, ViewChild, ComponentResolver, ChangeDetectorRef, Host} from '@angular/core';
1+
import {ComponentRef, ComponentFactory, ViewContainerRef, Component,
2+
Type, ViewChild, ComponentResolver, ChangeDetectorRef, Host} from '@angular/core';
23
import trace = require("trace");
34

45
type AnyComponentRef = ComponentRef<any>;
@@ -22,12 +23,12 @@ function log(message: string) {
2223
template: `<Placeholder #loader></Placeholder>`
2324
})
2425
export class DetachedLoader {
25-
@ViewChild('loader', { read: ViewContainerRef }) containerRef: ViewContainerRef;
26+
@ViewChild('loader', { read: ViewContainerRef }) childContainerRef: ViewContainerRef;
2627

2728
private viewLoaded = false;
2829
private pendingLoads: PendingLoadEntry[] = [];
2930

30-
constructor(private compiler: ComponentResolver, private changeDetector: ChangeDetectorRef) { }
31+
constructor(private compiler: ComponentResolver, private changeDetector: ChangeDetectorRef,privatecontainerRef: ViewContainerRef) { }
3132

3233
public ngAfterViewInit() {
3334
log("DetachedLoader.ngAfterViewInit");
@@ -42,7 +43,7 @@ export class DetachedLoader {
4243

4344
private loadInLocation(componentType: Type): Promise<ComponentRef<any>> {
4445
return this.compiler.resolveComponent(componentType).then((componentFactory) => {
45-
return this.containerRef.createComponent(componentFactory, this.containerRef.length, this.containerRef.parentInjector, null);
46+
return this.childContainerRef.createComponent(componentFactory, this.childContainerRef.length, this.childContainerRef.parentInjector, null);
4647
}).then((compRef) => {
4748
log("DetachedLoader.loadInLocation component loaded -> markForCheck");
4849
// Component is created, buit may not be checked if we are loading
@@ -66,7 +67,7 @@ export class DetachedLoader {
6667
// so that loading can conitionue.
6768
log("DetachedLoader.loadComponent -> markForCheck(with setTimeout())")
6869
setTimeout(() => this.changeDetector.markForCheck(), 0);
69-
70+
7071
return new Promise((resolve, reject) => {
7172
this.pendingLoads.push({
7273
componentType: componentType,
@@ -75,4 +76,8 @@ export class DetachedLoader {
7576
});
7677
}
7778
}
79+
80+
public loadWithFactory<T>(factory: ComponentFactory<T>): ComponentRef<T> {
81+
return this.containerRef.createComponent(factory, this.containerRef.length, this.containerRef.parentInjector, null);
82+
}
7883
}

‎nativescript-angular/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"@angular/platform-browser-dynamic": "2.0.0-rc.2",
2727
"@angular/platform-server": "2.0.0-rc.2",
2828
"@angular/router-deprecated": "2.0.0-rc.2",
29+
"@angular/router": "3.0.0-alpha.6",
2930
"rxjs": "5.0.0-beta.6",
3031
"zone.js": "^0.6.12",
3132
"reflect-metadata": "^0.1.3",
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export {
2+
NS_ROUTER_PROVIDERS,
3+
NS_ROUTER_DIRECTIVES,
4+
routerTraceCategory
5+
} from "./router-deprecated/ns-router-deprecated";
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import {Type} from '@angular/core/src/facade/lang';
2+
import {NSRouterLink} from './ns-router-link';
3+
import {PageRouterOutlet} from './page-router-outlet';
4+
import {NSLocationStrategy} from '../router/ns-location-strategy';
5+
import {ROUTER_PROVIDERS} from '@angular/router-deprecated';
6+
import {LocationStrategy} from '@angular/common';
7+
import {provide} from '@angular/core';
8+
export {routerTraceCategory} from "../trace";
9+
10+
export const NS_ROUTER_PROVIDERS: any[] = [
11+
ROUTER_PROVIDERS,
12+
NSLocationStrategy,
13+
provide(LocationStrategy, {useExisting: NSLocationStrategy}),
14+
];
15+
16+
export const NS_ROUTER_DIRECTIVES: Type[] = [
17+
NSRouterLink,
18+
PageRouterOutlet
19+
];
Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import {Directive, Input} from '@angular/core';
2+
import {isString} from '@angular/core/src/facade/lang';
3+
import {Router, Instruction} from '@angular/router-deprecated';
4+
import {routerLog} from "../trace";
5+
6+
/**
7+
* The NSRouterLink directive lets you link to specific parts of your app.
8+
*
9+
* Consider the following route configuration:
10+
* ```
11+
* @RouteConfig([
12+
* { path: '/user', component: UserCmp, as: 'User' }
13+
* ]);
14+
* class MyComp {}
15+
* ```
16+
*
17+
* When linking to this `User` route, you can write:
18+
*
19+
* ```
20+
* <a [nsRouterLink]="['./User']">link to user component</a>
21+
* ```
22+
*
23+
* RouterLink expects the value to be an array of route names, followed by the params
24+
* for that level of routing. For instance `['/Team', {teamId: 1}, 'User', {userId: 2}]`
25+
* means that we want to generate a link for the `Team` route with params `{teamId: 1}`,
26+
* and with a child route `User` with params `{userId: 2}`.
27+
*
28+
* The first route name should be prepended with `/`, `./`, or `../`.
29+
* If the route begins with `/`, the router will look up the route from the root of the app.
30+
* If the route begins with `./`, the router will instead look in the current component's
31+
* children for the route. And if the route begins with `../`, the router will look at the
32+
* current component's parent.
33+
*/
34+
@Directive({
35+
selector: '[nsRouterLink]',
36+
inputs: ['params: nsRouterLink'],
37+
host: {
38+
'(tap)': 'onTap()',
39+
'[class.router-link-active]': 'isRouteActive'
40+
}
41+
})
42+
export class NSRouterLink {
43+
private _routeParams: any[];
44+
45+
// the instruction passed to the router to navigate
46+
private _navigationInstruction: Instruction;
47+
48+
constructor(private _router: Router) { }
49+
50+
get isRouteActive(): boolean { return this._router.isRouteActive(this._navigationInstruction); }
51+
52+
set params(changes: any[]) {
53+
this._routeParams = changes;
54+
this._navigationInstruction = this._router.generate(this._routeParams);
55+
}
56+
57+
onTap(): void {
58+
routerLog("NSRouterLink onTap() instruction: " + JSON.stringify(this._navigationInstruction))
59+
this._router.navigateByInstruction(this._navigationInstruction);
60+
}
61+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /