Question

在我的主文件中，代码是这样的。

import {provide, enableProdMode} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';
import {APP_BASE_HREF} from 'angular2/platform/common';
import {AppComponent} from './app/components/app.component';

enableProdMode();

bootstrap(AppComponent, [
  ROUTER_PROVIDERS, HTTP_PROVIDERS,
  provide(APP_BASE_HREF, { useValue: '<%= APP_BASE %>' })
]);

在我的app.component.ts文件中，我有以下代码。

import {Component} from 'angular2/core';
import {enableProdMode} from 'angular2/core';
import {Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, RouteConfig, RouteParams} from 'angular2/router';
import {SportsLiveFeedService} from '../shared/index';
import {MainComponent} from '../main/index';
import {ResultsComponent} from '../results/index';

@Component({
  selector: 'sd-app',
  viewProviders: [SportsLiveFeedService],
  templateUrl: 'app/components/app.component.html',
  styleUrls: ['css/bootstrap.min.css', 'css/main.css'],
  directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
  {
    path: '/',
    name: 'Main',
    component: MainComponent
  },
  {
    path: '/results/:id',
    name: 'Results',
    component: ResultsComponent
  }
])
export class AppComponent {
  constructor(private router: Router) {}
}

在ResultsComponent中，我的代码是这样的。

import {Component} from 'angular2/core';
import {Inject} from 'angular2/di';
import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/common';
import {SportsLiveFeedService} from '../../shared/index';

@Component({
  selector: 'sd-about',
  templateUrl: 'app/results/components/results.component.html',
  styleUrls: ['css/bootstrap.min.css', 'css/main.css'],
  directives: [FORM_DIRECTIVES, CORE_DIRECTIVES],
  providers: [SportsLiveFeedService]
})

export class ResultsComponent implements OnInit {

  eventsDetails: [];

  constructor(private _sportsLiveFeedService: SportsLiveFeedService){
    this._sportsLiveFeedService = _sportsLiveFeedService;
  }

  ngOnInit(){
      this._sportsLiveFeedService
        .getEachEventInDetailByMeetingId()
        .subscribe(p => this.eventsDetails = p)
    }

}

问题是我第一次加载屏幕时很好。但是当我像这样导航到http://localhost:5555/results/121212时，第二个屏幕UI没有显示。请帮我解决这个问题。我是Angular 2.0的新手

Angular 2.0路由问题

0 个答案: