Question

我目前正在尝试创建一个新闻页面，该新闻页面会引入新的新闻报道，这些新闻报道位于页面的侧面部分。在这些故事中，我想说更多阅读，它会带你到一个新的页面。我的问题是这个页面已经在主页面的一条路线上了。

我的第一页就是这个

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 { 
}

和点击新闻的链接它出现了小新闻故事（我已经发出信号）这个页面是这个

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();
    }
}

在这个页面中，我不得不评论我试图让它显示任何东西的位。所以在a中我想让它转到第一页上列出的更多新闻组件。

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

抱歉，如果这是一个非常冗长的问题，但最终有没有人知道如何链接到角度2应用程序中的另一个页面，该应用程序在组件中有链接？

angular2你如何在一条路线内路线？

0 个答案: