HI all,
I have been working through the MEAP book Angular2 Development with
Typescript. It is a pre-release book and is using the Router v2, so isn't
current with the newer Router v3 in the latest Angular release candidates.
It has an interesting task in chapter 3 about building routes, and
specifically, having nested routes. The version in the book and the
downloadable code doesn't work in the latest Angular2 RC, so I did some
research and got a version that functions. You can see it working in this
plunker: https://embed.plnkr.co/rPp0tQOJ4z93Wt8fQoRk/.
The problem I have with it is that there is one super route which must know
all children which may have routes of their own. I would rather have each
component manage its own routing, and I haven't been able to figure that
out. Is there a way to do it?
Here is the general outline
1. You have a main view with a router-outlet which takes one of two
views, the "Home" view, and the "Product" view.
2. The "Product" view has its own router-outlet which, again, takes two
views, the "Details" view the "Seller" view.
Pretty simple. To start, I will show you the Product code (relevant parts:
*product.ts*
import {Router, ROUTER_DIRECTIVES} from '@angular/router';
@Component({
selector: 'product',
directives: [ROUTER_DIRECTIVES],
template: `
<div class="product">
<h1>Product Detail for: {{ productID }}</h1>
<router-outlet></router-outlet>
<p><a [routerLink]="['seller', 'abc']">Seller Info</a></p>
</div>
`,
styles: ['.product {background: cyan}']
})
export class ProductDetailComponent {
...
}
Just some space for the router-outlet and a link to switch to the seller
view.
*product_routes.ts*
import { provideRouter, RouterConfig } from '@angular/router';
export const ProductRoutes: RouterConfig = [
{ path: 'product/:id', component: ProductDetailComponent,
children: [
{ path: 'seller/:id', component: SellerInfoComponent },
{ path: '' , component: ProductDescriptionComponent }
]}
];
export const PRODUCT_ROUTER_PROVIDERS = [ provideRouter(ProductRoutes)];
The path mapping for the product view, and child routes for the two sub
views.
*main.ts*
import {bootstrap} from '@angular/platform-browser-dynamic';
import {Component} from '@angular/core';
import {LocationStrategy, HashLocationStrategy} from '@angular/common';
import {ROUTER_DIRECTIVES} from '@angular/router';
import {APP_ROUTER_PROVIDERS} from './app_routes';
@Component({
selector: 'basic-routing',
directives: [ROUTER_DIRECTIVES],
template: `
<a [routerLink]="['/']">Home</a>
<a [routerLink]="['/product', '1234']">Product Details</a>
<router-outlet></router-outlet>
`
})
class RootComponent{
}
bootstrap(RootComponent,
[ APP_ROUTER_PROVIDERS,
{provide: LocationStrategy, useClass: HashLocationStrategy}
]);
Two links to switch between Home and Product views.
app_routes.ts
import { provideRouter, RouterConfig } from '@angular/router';
import { ProductRoutes } from './product_routes';
export const appRoutes: RouterConfig = [
{ path: '' , component: HomeComponent },
...ProductRoutes
];
export const APP_ROUTER_PROVIDERS = [ provideRouter(appRoutes)];
This is the part that I really don't like. These are the routes for the
overall app. I would like it to be just the top level view routes, to
navigate between /home and /product/:id. Then let the Product component
deal with the routes between the /product/:id (product details) and
/product/:id/seller/:id (seller) views. As it is, this top level
RouteConfig needs to know all components which will want their own
RouteConfigs, so it can include them in the final provider. I haven't
found a way that lets me navigate both the AppRoutes and the ProductRoutes,
or lets me keep the ProductRoutes private. Any ideas?
Thanks is advance,
Steve
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
