|
| 1 | +import {AfterContentInit, ContentChildren, Directive, ElementRef, Input, OnChanges, OnDestroy, QueryList, Renderer} from '@angular/core'; |
| 2 | +import {Subscription} from 'rxjs/Subscription'; |
| 3 | + |
| 4 | +import {NavigationEnd, Router} from '@angular/router'; |
| 5 | +import {UrlTree, containsTree} from '@angular/router/src/url_tree'; |
| 6 | + |
| 7 | +import {NSRouterLink} from './ns-router-link'; |
| 8 | + |
| 9 | + |
| 10 | +/** |
| 11 | + * The NSRouterLinkActive directive lets you add a CSS class to an element when the link's route |
| 12 | + * becomes active. |
| 13 | + * |
| 14 | + * Consider the following example: |
| 15 | + * |
| 16 | + * ``` |
| 17 | + * <a [nsRouterLink]="/user/bob" [nsRouterLinkActive]="active-link">Bob</a> |
| 18 | + * ``` |
| 19 | + * |
| 20 | + * When the url is either '/user' or '/user/bob', the active-link class will |
| 21 | + * be added to the component. If the url changes, the class will be removed. |
| 22 | + * |
| 23 | + * You can set more than one class, as follows: |
| 24 | + * |
| 25 | + * ``` |
| 26 | + * <a [nsRouterLink]="/user/bob" [nsRouterLinkActive]="class1 class2">Bob</a> |
| 27 | + * <a [nsRouterLink]="/user/bob" [nsRouterLinkActive]="['class1', 'class2']">Bob</a> |
| 28 | + * ``` |
| 29 | + * |
| 30 | + * You can configure NSRouterLinkActive by passing `exact: true`. This will add the classes |
| 31 | + * only when the url matches the link exactly. |
| 32 | + * |
| 33 | + * ``` |
| 34 | + * <a [nsRouterLink]="/user/bob" [nsRouterLinkActive]="active-link" [nsRouterLinkActiveOptions]="{exact: |
| 35 | + * true}">Bob</a> |
| 36 | + * ``` |
| 37 | + * |
| 38 | + * Finally, you can apply the NSRouterLinkActive directive to an ancestor of a RouterLink. |
| 39 | + * |
| 40 | + * ``` |
| 41 | + * <div [nsRouterLinkActive]="active-link" [nsRouterLinkActiveOptions]="{exact: true}"> |
| 42 | + * <a [nsRouterLink]="/user/jim">Jim</a> |
| 43 | + * <a [nsRouterLink]="/user/bob">Bob</a> |
| 44 | + * </div> |
| 45 | + * ``` |
| 46 | + * |
| 47 | + * This will set the active-link class on the div tag if the url is either '/user/jim' or |
| 48 | + * '/user/bob'. |
| 49 | + * |
| 50 | + * @stable |
| 51 | + */ |
| 52 | +@Directive({ selector: '[nsRouterLinkActive]' }) |
| 53 | +export class NSRouterLinkActive implements OnChanges, OnDestroy, AfterContentInit { |
| 54 | + @ContentChildren(NSRouterLink) links: QueryList<NSRouterLink>; |
| 55 | + |
| 56 | + private classes: string[] = []; |
| 57 | + private subscription: Subscription; |
| 58 | + |
| 59 | + @Input() private nsRouterLinkActiveOptions: { exact: boolean } = { exact: false }; |
| 60 | + |
| 61 | + constructor(private router: Router, private element: ElementRef, private renderer: Renderer) { |
| 62 | + this.subscription = router.events.subscribe(s => { |
| 63 | + if (s instanceof NavigationEnd) { |
| 64 | + this.update(); |
| 65 | + } |
| 66 | + }); |
| 67 | + } |
| 68 | + |
| 69 | + ngAfterContentInit(): void { |
| 70 | + this.links.changes.subscribe(s => this.update()); |
| 71 | + this.update(); |
| 72 | + } |
| 73 | + |
| 74 | + @Input("nsRouterLinkActive") |
| 75 | + set nsRouterLinkActive(data: string[] | string) { |
| 76 | + if (Array.isArray(data)) { |
| 77 | + this.classes = <any>data; |
| 78 | + } else { |
| 79 | + this.classes = data.split(' '); |
| 80 | + } |
| 81 | + } |
| 82 | + |
| 83 | + ngOnChanges(changes: {}): any { this.update(); } |
| 84 | + ngOnDestroy(): any { this.subscription.unsubscribe(); } |
| 85 | + |
| 86 | + private update(): void { |
| 87 | + if (!this.links) return; |
| 88 | + |
| 89 | + const currentUrlTree = this.router.parseUrl(this.router.url); |
| 90 | + const isActiveLinks = this.reduceList(currentUrlTree, this.links); |
| 91 | + this.classes.forEach( |
| 92 | + c => this.renderer.setElementClass( |
| 93 | + this.element.nativeElement, c, isActiveLinks)); |
| 94 | + } |
| 95 | + |
| 96 | + private reduceList(currentUrlTree: UrlTree, q: QueryList<any>): boolean { |
| 97 | + return q.reduce( |
| 98 | + (res: boolean, link: NSRouterLink) => |
| 99 | + res || containsTree(currentUrlTree, link.urlTree, this.nsRouterLinkActiveOptions.exact), |
| 100 | + false); |
| 101 | + } |
| 102 | +} |
0 commit comments