CODEWITHSUNDEEP
javascriptroutesangular
Eesa
Eesa

Reputation: 2859

Angular 2 - Routing from the `first child` component to a `second child` component of a parent component

I am trying to do a simple routing from a child component to another child component of a parent component. router-outlet is defined in parent component. Here is how I am trying to achieve this:

parent.ts

import {Component} from 'angular2/core';
import {RouteConfig,ROUTER_PROVIDERS,ROUTER_DIRECTIVES} from 'angular2/router';
import {bootstrap} from 'angular2/platform/browser';
import {FirstChildCmp} from "./first_child";
import {SecondChildCmp} from "./second_child";

@Component({
  selector: 'app',
  template: `
  <router-outlet></router-outlet>
  `,
  directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
  {path: '/first_child', component: FirstChildCmp, name: 'FirstChild', useAsDefault:true},
  {path: '/second_child',component: SecondChildCmp, name:'SecondChild'}
])
export class ParentCmp{}

bootstrap(ParentCmp,[
  ROUTER_PROVIDERS
]);

first_child.ts

import {Component} from 'angular2/core';
import {ROUTER_DIRECTIVES} from 'angular2/router';

@Component({
  selector: 'child',
  template: `
  <a [routerLink]="[SecondChild]">Go to second child</a>
  `,
  directives: [ROUTER_DIRECTIVES]
})
export class FirstChildCmp{}

second_child.ts

import {Component} from 'angular2/core';

@Component({
  selector: 'child',
  template: `
  This is second child.
  `
})
export class SecondChildCmp{}

When the user clicks Go to second child I want to show the template of second child component. But I am getting the following error:

Component "FirstChildCmp" has no route config.

But I don't want to define configuration in FirstChildCmp instead I want to use parent's configuration. I have re-produced the problem on plunker here

Upvotes: 2

Views: 546

Answers (1)

Ankit Singh
Ankit Singh

Reputation: 24945

FirstChild.ts Plnkr

@Component({
  selector: 'child',
  template: `
  <a [routerLink]="['SecondChild']">Go to second child</a>
  `,
  directives: [ROUTER_DIRECTIVES]
})
export class FirstChildCmp{}

In ['SecondChild'] you missed quotes. It has to be a string.

Upvotes: 3

Related Questions