angular2 how do you route inside a route?

Question

i am currently trying to create a news page that brings in new news stories which is placed in a side section of the page. on these stories i want to say read more and it take you to a new page. my problem is that this page is already within a route off of the main page .

my first page is this

import {Component} from 'angular2/core';
import {QuickQuestionComponent} from './quick-question.component';
import {NewsTickerComponent} from './news-ticker.component';
import {MoreNewsComponent} from './more-news.component';

import {RouteConfig,ROUTER_DIRECTIVES} from 'angular2/router';

@RouteConfig([
    { path:"/question" , name: 'Question', component: QuickQuestionComponent },
    { path:"/news" , name: "News", component: NewsTickerComponent },
    { path:"/news/morenews" , name: "Morenews", component: MoreNewsComponent },
    { path:"/*other" , name: "other", redirectTo: ['Question'] }
])

@Component({
    selector: 'my-app',
    template: `
        <nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
            aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a [routerLink]="['Question']">Question</a></li>
                <li><a [routerLink]="['News']">News</a></li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>\n\

<div class="container">
<router-outlet></router-outlet>
<div> <!-- container -->
`,
//               <quick-question></quick-question>
//               <news-ticker></news-ticker>
    directives:[QuickQuestionComponent,NewsTickerComponent,ROUTER_DIRECTIVES]
})
export class AppComponent { 
}

and and the link to news is clicked it comes up with the small news stories (i have signled them out) this page is this

import {Component} from 'angular2/core';
import {NewsTickerService} from './news-ticker.service';
import {SummaryPipe} from './summary.pipe';
import {MoreNewsComponent} from './more-news.component';

import {RouteConfig,ROUTER_DIRECTIVES} from 'angular2/router';

//@RouteConfig([
//    { path:"/morenews" , name: 'MoreNews', component: MoreNewsComponent }
//    
//])

@Component({
    selector: 'news-ticker',
    template: `

    <h1> News Ticker </h1>\n\
    <div *ngFor="#new of news">
      <h4>{{new.title}}</h4>
      <p>{{new.body | summary:60}}</p>\n\
      <p><strong><a> More Information </a></strong></p>
    </div>
`,
  providers:[NewsTickerService,MoreNewsComponent],
  pipes:[SummaryPipe],
  directives:[ROUTER_DIRECTIVES]
})
export class NewsTickerComponent { 
    news;

    constructor(newsTickerService: NewsTickerService) {
        this.news = newsTickerService.getNews();
    }
}

within this page i have had to comment out bits i have tried to make it display anything. so within the a I want to make it goto the more news component listed on the first page.

<p><strong><a [routerLink]="['morenews'] > More Information </a></strong></p>

sorry if this is a really long winded question but ultimately does anyone know how to link to another page in a angular 2 app which has its link in a component?