Created
October 7, 2017 12:52
-
-
Save bennadel/5b1b4b1157b6b41074e78a68cd71e764 to your computer and use it in GitHub Desktop.
Local Redirects Automatically Append The Non-Local Route Segments In Angular 4.4.4
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Import the core angular services. | |
import { Component } from "@angular/core"; | |
// ----------------------------------------------------------------------------------- // | |
// ----------------------------------------------------------------------------------- // | |
@Component({ | |
selector: "my-app", | |
styleUrls: [ "./app.component.css" ], | |
template: | |
` | |
<p> | |
Try going to one of these <code>/a</code> prefix routes | |
(which do not have materialized views): | |
</p> | |
<ul> | |
<li><a routerLink="/a">/a</a></li> | |
<li><a routerLink="/a/items">/a/items</a></li> | |
<li><a routerLink="/a/items/4">/a/items/4</a></li> | |
<li><a routerLink="/a/items/4/detail">/a/items/4/detail</a></li> | |
<li><a routerLink="/a/items/4/detail" fragment="anchor">/a/items/4/detail#anchor</a></li> | |
<li><a routerLink="/a/items/4/detail" [queryParams]="{ q: '1' }">/a/items/4/detail?q=1</a></li> | |
</ul> | |
<router-outlet></router-outlet> | |
` | |
}) | |
export class AppComponent { | |
// ... | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Import the core angular services. | |
import { BrowserModule } from "@angular/platform-browser"; | |
import { NgModule } from "@angular/core"; | |
import { RouterModule } from "@angular/router"; | |
import { Routes } from "@angular/router"; | |
// Import the application components and services. | |
import { AppComponent } from "./app.component"; | |
import { BComponent } from "./b.component"; | |
// ----------------------------------------------------------------------------------- // | |
// ----------------------------------------------------------------------------------- // | |
var routes: Routes = [ | |
// We're going to redirect all "/a" routes to the "/b/z" route. When redirecting to | |
// a RELATIVE path (ie, not absolute), the remainder of the path (not matched by | |
// the local pattern) will be AUTOMATICALLY appended to the redirect. As such, this | |
// route configuration will replace any "/a" with "/b/z" in any route that begins | |
// with the "/a" prefix (no need to create a "sink" route parameter). | |
{ | |
path: "a", | |
redirectTo: "b/z" | |
}, | |
{ | |
path: "b/z", | |
children: [ | |
// We're going to render all "/b/z"-prefix routes in the same component. | |
{ | |
path: "**", | |
component: BComponent | |
} | |
] | |
} | |
]; | |
// ----------------------------------------------------------------------------------- // | |
// ----------------------------------------------------------------------------------- // | |
@NgModule({ | |
bootstrap: [ | |
AppComponent | |
], | |
imports: [ | |
BrowserModule, | |
RouterModule.forRoot( | |
routes, | |
{ | |
// Tell the router to use the HashLocationStrategy. | |
useHash: true | |
} | |
) | |
], | |
declarations: [ | |
AppComponent, | |
BComponent | |
], | |
providers: [ | |
// CAUTION: We don't need to specify the LocationStrategy because we are setting | |
// the "useHash" property in the Router module above. | |
// -- | |
// { | |
// provide: LocationStrategy, | |
// useClass: HashLocationStrategy | |
// } | |
] | |
}) | |
export class AppModule { | |
// ... | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Import the core angular services. | |
import { ActivatedRoute } from "@angular/router"; | |
import { Component } from "@angular/core"; | |
import { Router } from "@angular/router"; | |
import { UrlSegment } from "@angular/router"; | |
// ----------------------------------------------------------------------------------- // | |
// ----------------------------------------------------------------------------------- // | |
@Component({ | |
styleUrls: [ "./b.component.css" ], | |
template: | |
` | |
<h3> | |
B/Z-Prefix Component | |
</h3> | |
<p> | |
You have navigated to <code>{{ url }}</code> | |
</p> | |
` | |
}) | |
export class BComponent { | |
public url: string; | |
// I initialize the B-view component. | |
constructor( activatedRoute: ActivatedRoute, router: Router ) { | |
// As the user navigates through the "/a"-prefix routes, they will all be | |
// redirected to the "/b/z"-prefix routes that are rendered by this component. | |
// As that happens, this component will persist since we never navigate away | |
// from it. As such, we have to listen for route changes to know when to update | |
// the view. | |
activatedRoute.url.subscribe( | |
( urlSegments: UrlSegment[] ) : void => { | |
this.url = router.url; | |
} | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment