Skip to content

Instantly share code, notes, and snippets.

@bennadel
Created October 7, 2017 12:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bennadel/5b1b4b1157b6b41074e78a68cd71e764 to your computer and use it in GitHub Desktop.
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
// 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 {
// ...
}
// 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 {
// ...
}
// 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