feat(core): added *route directive

RouteDirective provides all fields from ActivatedRoute object

interface RouteContext {
    $implicit: ActivatedRoute;
    snapshot: ActivatedRouteSnapshot;
    url: UrlSegment[];
    params: Params;
    queryParams: Params;
    fragment: string;
    data: Data;
    outlet: string;
    component: Type<any> | string;
    routeConfig: Route;
    root: ActivatedRoute;
    parent: ActivatedRoute | null;
    firstChild: ActivatedRoute | null;
    children: ActivatedRoute[];
    pathFromRoot: ActivatedRoute[];
    paramMap: ParamMap;
    queryParamMap: ParamMap;
}

Usage examples:

*route="let route"
*route="let snapshot = snapshot"
*route="let url = url"
*route="let params = params"
*route="let queryParams = queryParams"
*route="let fragment = fragment"
*route="let data = data"
*route="let outlet = outlet"
*route="let component = component"
*route="let routeConfig = routeConfig"
*route="let root = root"
*route="let parent = parent"
*route="let firstChild = firstChild"
*route="let children = children"
*route="let pathFromRoot = pathFromRoot"
*route="let paramMap = paramMap"
*route="let queryParamMap = queryParamMap"

Author: thekiba

projects/platform/package.json

@@ -38,6 +38,8 @@
   "homepage": "https://github.com/ngxf/platform",
   "peerDependencies": {
     "@angular/common": "^6.0.0-rc.0 || ^6.0.0",
-    "@angular/core": "^6.0.0-rc.0 || ^6.0.0"
+    "@angular/core": "^6.0.0-rc.0 || ^6.0.0",
+    "@angular/router": "^6.0.0-rc.0 || ^6.0.0",
+    "rxjs": ">=6.0.0 || ^5.6.0-forward-compat.4"
   }
 }

projects/platform/src/lib/directives/http.directive.ts

@@ -115,15 +115,13 @@ export class HttpDirective implements OnChanges {
     private execute(strategy: HttpStrategy) {
         const params = strategy.changes.map(field => this[field]);
 
-        console.log(strategy, ...params);
-
         this.request(strategy.type, ...params);
     }
 
     private request(method, ...params) {
         this.http[method](...params)
             .pipe(catchError((e) => {
-                console.log(e);
+                console.error(e);
                 return of(null);
             }))
             .subscribe((data) => {

projects/platform/src/lib/directives/index.ts

@@ -1 +1,2 @@
 export * from './http.directive';
+export * from './route.directive';

projects/platform/src/lib/directives/route.directive.ts

@@ -0,0 +1,78 @@
+import { OnDestroy, Directive, Type, TemplateRef, ViewContainerRef, EmbeddedViewRef } from '@angular/core';
+import { ActivatedRoute, ActivatedRouteSnapshot, UrlSegment, Params, Data, Route, ParamMap, convertToParamMap } from '@angular/router';
+import { Subscription } from 'rxjs';
+import { distinctUntilChanged } from 'rxjs/operators';
+
+interface RouteContext {
+    $implicit: ActivatedRoute;
+    snapshot: ActivatedRouteSnapshot;
+    url: UrlSegment[];
+    params: Params;
+    queryParams: Params;
+    fragment: string;
+    data: Data;
+    outlet: string;
+    component: Type<any> | string;
+    routeConfig: Route;
+    root: ActivatedRoute;
+    parent: ActivatedRoute | null;
+    firstChild: ActivatedRoute | null;
+    children: ActivatedRoute[];
+    pathFromRoot: ActivatedRoute[];
+    paramMap: ParamMap;
+    queryParamMap: ParamMap;
+}
+
+const ASYNC_FIELDS = ['url', 'params', 'queryParams', 'fragment', 'data', 'paramMap', 'queryParamMap'];
+
+@Directive({ selector: '[route]' })
+export class RouteDirective implements OnDestroy {
+    private context: RouteContext = {
+        $implicit: this.route,
+        get snapshot() { return this.route.snapshot; },
+        url: [],
+        params: {},
+        queryParams: {},
+        fragment: null,
+        data: null,
+        get outlet() { return this.route.outlet; },
+        get component() { return this.route.component; },
+        get routeConfig() { return this.route.routeConfig; },
+        get root() { return this.route.root; },
+        get parent() { return this.route.parent; },
+        get firstChild() { return this.route.firstChild; },
+        get children() { return this.route.children; },
+        get pathFromRoot() { return this.route.pathFromRoot; },
+        paramMap: convertToParamMap({}),
+        queryParamMap: convertToParamMap({})
+    };
+    private viewRef: EmbeddedViewRef<RouteContext> =
+        this.viewContainerRef.createEmbeddedView(this.templateRef, this.context);
+    private subscriptions: Subscription[] = this.attachFields(ASYNC_FIELDS);
+
+    constructor(
+        private templateRef: TemplateRef<RouteContext>,
+        private viewContainerRef: ViewContainerRef,
+        private route: ActivatedRoute
+    ) { }
+
+    ngOnDestroy() {
+        this.subscriptions.forEach((subscription) => {
+            subscription.unsubscribe();
+        });
+        this.subscriptions = null;
+    }
+
+    private attachFields(asyncFields: string[]): Subscription[] {
+        return asyncFields.map(field => this.asyncAttach(field));
+    }
+
+    private asyncAttach(field: string): Subscription {
+        return this.route[field]
+            .pipe(distinctUntilChanged())
+            .subscribe(value => {
+                this.context[field] = value;
+                this.viewRef.markForCheck();
+            });
+    }
+}

projects/platform/src/lib/platform.module.ts

@@ -1,9 +1,9 @@
 import { NgModule } from '@angular/core';
-import { HttpDirective } from './directives';
+import { HttpDirective, RouteDirective } from './directives';
 
 @NgModule({
   imports: [],
-  declarations: [HttpDirective],
-  exports: [HttpDirective]
+  declarations: [HttpDirective, RouteDirective],
+  exports: [HttpDirective, RouteDirective]
 })
 export class NgxfModule { }

src/app/shared/shared.module.ts

@@ -15,6 +15,7 @@ const COMPONENTS = [
     exports: [
         CommonModule,
         COMPONENTS,
+        NgxfModule,
         MatToolbarModule,
         MatButtonModule,
         MatSidenavModule,

src/app/view/users/user/user.component.html

@@ -1 +1 @@
-<app-user [username]="username | async"></app-user>
+<app-user *route="let params = paramMap" [username]="params.get('username')"></app-user>

src/app/view/users/user/user.component.ts

@@ -1,14 +1,8 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { Observable } from 'rxjs';
-import { map, tap } from 'rxjs/operators';
 
 @Component({
     selector: 'app-user-view',
     templateUrl: 'user.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class UserViewComponent {
-    username: Observable<string> = this.route.paramMap.pipe(map(params => params.get('username')));
-    constructor(private route: ActivatedRoute) {}
-}
+export class UserViewComponent {}