I am currently developing a web application with the latest version of Angular (Angular v2.0.0). In my app, I have a sub-navigation and I want to pass data to a sub-page that loads its own component through the router-outlet.
According to Angular 2 documentation, one way to achieve this is by including a sub-page directive in the main component template. However, this approach doesn't suit my requirements.
Instead, I would like to implement something like the following:
app.routes.ts
export const routes: RouterConfig = [
{ path: '/', redirectTo: '/one' },
{ path: '/one', as: 'One', component: OneComponent },
{ path: '/two', as: 'Two', component: TwoComponent },
{ path: '/three', as: 'Three', component: ThreeComponent }
];
export const APP_ROUTER_PROVIDERS = [
provideRouter(routes)
];
main.component.ts
@Component({
moduleId: module.id,
selector: 'main',
templateUrl: 'main.component.html'
})
export class MainComponent {
maindata: Object = {name:'jim'};
}
main.component.html
<h1>Home</h1>
<a [router-link]="['./sub1']">One</a> |
<a [router-link]="['./sub2']">Two</a> |
<a [router-link]="['./sub3']">Three</a>
<hr/>
<router-outlet [data]="maindata"></router-outlet>
one.component.ts
@Component({
moduleId: module.id,
selector: 'one',
inputs: ['data'],
templateUrl: 'one.html'
})
export class OneComponent {
@Input() data;
}
one.component.html
<h2>{{ data.name }}</h2>
...
Would appreciate guidance on how to achieve this setup with Angular 2.