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
Appearance settings

Commit 67b6ee5

Browse filesBrowse files
bennadelbennadel
committed
Add router-link-active hack for ng5.
1 parent 8d2f6b1 commit 67b6ee5
Copy full SHA for 67b6ee5
Expand file treeCollapse file tree

20 files changed

+4584
-0
lines changed
Open diff view settings
Collapse file

‎README.md‎

Copy file name to clipboardExpand all lines: README.md
+1Lines changed: 1 addition & 0 deletions
  • Display the source diff
  • Display the rich diff
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ with.
1010

1111
## My JavaScript Demos - I Love JavaScript!
1212

13+
* [Forcing RouterLinkActive To Update Using An Inputs Hack In Angular 5.0.2](http://bennadel.github.io/JavaScript-Demos/demos/router-link-active-hack-angular5/)
1314
* [Prevent Body Scrolling With A WindowScrolling Service When Showing A Modal Window In Angular 5.0.2](http://bennadel.github.io/JavaScript-Demos/demos/window-scroll-service-angular5/)
1415
* [Sanity Check: Shared Style Urls Are Only Compiled Into Angular 5.0.1 Once](http://bennadel.github.io/JavaScript-Demos/demos/shared-style-urls-angular5/)
1516
* [Stacking Context Is The Key To Understanding CSS Z-Index In Angular 5.0.1](http://bennadel.github.io/JavaScript-Demos/demos/z-index-exploration-angular5/)
Collapse file

‎demos/router-link-active-hack-angular5/.gitignore‎

Copy file name to clipboard
+4Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
2+
# Now that we're using Webpack, we can install modules locally and just ignore
3+
# them since the assets are baked into the compiled modules.
4+
node_modules/
Collapse file

‎demos/router-link-active-hack-angular5/app/app.component.less‎

Copy file name to clipboard
+20Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
2+
:host {
3+
display: block ;
4+
font-size: 18px ;
5+
}
6+
7+
nav {
8+
display: flex ;
9+
10+
.item {
11+
border-bottom: 3px solid #CCCCCC ;
12+
margin-right: 10px ;
13+
padding: 4px 10px 4px 10px ;
14+
text-decoration: none ;
15+
16+
&.on {
17+
border-color: #FF3366 ;
18+
}
19+
}
20+
}
Collapse file

‎demos/router-link-active-hack-angular5/app/app.component.ts‎

Copy file name to clipboard
+25Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
2+
// Import the core angular services.
3+
import { Component } from "@angular/core";
4+
5+
// ----------------------------------------------------------------------------------- //
6+
// ----------------------------------------------------------------------------------- //
7+
8+
@Component({
9+
selector: "my-app",
10+
styleUrls: [ "./app.component.less" ],
11+
template:
12+
`
13+
<nav>
14+
<a routerLink="/" class="item">Root</a>
15+
<a routerLink="go/1" class="item" routerLinkActive="on">Item 1</a>
16+
<a routerLink="go/2" class="item" routerLinkActive="on">Item 2</a>
17+
<a routerLink="go/3" class="item" routerLinkActive="on">Item 3</a>
18+
</nav>
19+
20+
<router-outlet></router-outlet>
21+
`
22+
})
23+
export class AppComponent {
24+
// ...
25+
}
Collapse file

‎demos/router-link-active-hack-angular5/app/app.module.ts‎

Copy file name to clipboard
+65Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
2+
// Import the core angular services.
3+
import { BrowserModule } from "@angular/platform-browser";
4+
import { NgModule } from "@angular/core";
5+
import { RouterModule } from "@angular/router";
6+
import { Routes } from "@angular/router";
7+
8+
// Import the application components and services.
9+
import { AppComponent } from "./app.component";
10+
import { ChildComponent } from "./child.component";
11+
12+
// ----------------------------------------------------------------------------------- //
13+
// ----------------------------------------------------------------------------------- //
14+
15+
var routes: Routes = [
16+
{
17+
path: "go/:id",
18+
children: [
19+
{
20+
path: ":mode",
21+
component: ChildComponent
22+
},
23+
{
24+
path: "",
25+
pathMatch: "full",
26+
redirectTo: "view"
27+
}
28+
]
29+
}
30+
];
31+
32+
// ----------------------------------------------------------------------------------- //
33+
// ----------------------------------------------------------------------------------- //
34+
35+
@NgModule({
36+
bootstrap: [
37+
AppComponent
38+
],
39+
imports: [
40+
BrowserModule,
41+
RouterModule.forRoot(
42+
routes,
43+
{
44+
// Tell the router to use the HashLocationStrategy.
45+
useHash: true
46+
}
47+
)
48+
],
49+
declarations: [
50+
AppComponent,
51+
ChildComponent
52+
],
53+
providers: [
54+
// CAUTION: We don't need to specify the LocationStrategy because we are setting
55+
// the "useHash" property in the Router module above.
56+
// --
57+
// {
58+
// provide: LocationStrategy,
59+
// useClass: HashLocationStrategy
60+
// }
61+
]
62+
})
63+
export class AppModule {
64+
// ...
65+
}
Collapse file

‎demos/router-link-active-hack-angular5/app/child.component.less‎

Copy file name to clipboard
+34Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
2+
:host {
3+
border-top: 1px solid #CCCCCC ;
4+
display: block ;
5+
margin: 30px 0px 30px 0px ;
6+
padding-top: 20px ;
7+
}
8+
9+
nav {
10+
display: flex ;
11+
margin-bottom: 20px ;
12+
13+
.label {
14+
margin-right: 20px ;
15+
}
16+
17+
.item {
18+
border-bottom: 3px solid #CCCCCC ;
19+
margin-right: 10px ;
20+
padding: 4px 10px 4px 10px ;
21+
text-decoration: none ;
22+
23+
&.on {
24+
border-color: #FF3366 ;
25+
}
26+
}
27+
}
28+
29+
p strong {
30+
background-color: gold ;
31+
border-right: 3px 3px 3px 3px ;
32+
display: inline-block ;
33+
padding: 3px 5px 3px 5px ;
34+
}
Collapse file

‎demos/router-link-active-hack-angular5/app/child.component.ts‎

Copy file name to clipboard
+86Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
2+
// Import the core angular services.
3+
import { ActivatedRoute } from "@angular/router";
4+
import { Component } from "@angular/core";
5+
import { OnDestroy } from "@angular/core";
6+
import { OnInit } from "@angular/core";
7+
import { ParamMap } from "@angular/router";
8+
import { Subscription } from "rxjs/Subscription";
9+
10+
// ----------------------------------------------------------------------------------- //
11+
// ----------------------------------------------------------------------------------- //
12+
13+
@Component({
14+
selector: "child-view",
15+
styleUrls: [ "./child.component.less" ],
16+
template:
17+
`
18+
<nav>
19+
<a routerLink="/go/{{ id }}/view" class="item" routerLinkActive="on">View</a>
20+
<a routerLink="/go/{{ id }}/edit" class="item" routerLinkActive="on">Edit</a>
21+
</nav>
22+
23+
<nav>
24+
<a
25+
routerLink="/go/{{ id }}/view"
26+
class="item"
27+
routerLinkActive="on"
28+
[routerLinkActiveOptions]="{ __change_detection_hack__: [ id, mode ] }">
29+
View
30+
</a>
31+
<a
32+
routerLink="/go/{{ id }}/edit"
33+
class="item"
34+
routerLinkActive="on"
35+
[routerLinkActiveOptions]="{ __change_detection_hack__: [ id, mode ] }">
36+
Edit
37+
</a>
38+
</nav>
39+
40+
<p>
41+
You are in mode <strong>{{ mode }}</strong> for child <strong>{{ id }}</strong>.
42+
</p>
43+
`
44+
})
45+
export class ChildComponent implements OnInit, OnDestroy {
46+
47+
public id: number;
48+
public mode: string;
49+
50+
private activatedRoute: ActivatedRoute;
51+
private paramMapSubscription: Subscription;
52+
53+
// I initialize the child-view component.
54+
constructor( activatedRoute: ActivatedRoute ) {
55+
56+
this.activatedRoute = activatedRoute;
57+
58+
}
59+
60+
// ---
61+
// PUBLIC METHODS.
62+
// ---
63+
64+
// I get called once when the component is being unmounted.
65+
public ngOnDestroy() : void {
66+
67+
( this.paramMapSubscription ) && this.paramMapSubscription.unsubscribe();
68+
69+
}
70+
71+
72+
// I get called once after the inputs have been bound for the first time.
73+
public ngOnInit() : void {
74+
75+
this.paramMapSubscription = this.activatedRoute.paramMap.subscribe(
76+
( paramMap: ParamMap ) : void => {
77+
78+
this.id = +paramMap.get( "id" );
79+
this.mode = paramMap.get( "mode" );
80+
81+
}
82+
);
83+
84+
}
85+
86+
}
Collapse file

‎demos/router-link-active-hack-angular5/app/main.htm‎

Copy file name to clipboard
+36Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
6+
<title>
7+
Forcing RouterLinkActive To Update Using An Inputs Hack In Angular 5.0.2
8+
</title>
9+
</head>
10+
<body>
11+
12+
<h1>
13+
Forcing RouterLinkActive To Update Using An Inputs Hack In Angular 5.0.2
14+
</h1>
15+
16+
<my-app>
17+
<p>
18+
<em>Loading files...</em>
19+
</p>
20+
21+
<p>
22+
npm Run Scripts:
23+
</p>
24+
25+
<ul>
26+
<li>
27+
<strong>npm run build</strong> &mdash; Compiles the .ts file into bundles.
28+
</li>
29+
<li>
30+
<strong>npm run watch</strong> &mdash; Compiles the .ts file into bundles and then watches files for changes.
31+
</li>
32+
</ul>
33+
</my-app>
34+
35+
</body>
36+
</html>
Collapse file

‎demos/router-link-active-hack-angular5/app/main.polyfill.ts‎

Copy file name to clipboard
+7Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
2+
// Import these libraries for their side-effects.
3+
import "core-js/client/shim.min.js";
4+
import "zone.js/dist/zone.js";
5+
6+
// Load the Web Animations API polyfill for most browsers (basically any browser other than Chrome and Firefox).
7+
// import "web-animations-js/web-animations.min.js";
Collapse file

‎demos/router-link-active-hack-angular5/app/main.ts‎

Copy file name to clipboard
+8Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
2+
// Import the core angular services.
3+
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
4+
5+
// Import the root module for bootstrapping.
6+
import { AppModule } from "./app.module";
7+
8+
platformBrowserDynamic().bootstrapModule( AppModule );

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.