AngularJS 2 和数据不会传递到 params 路由

在一个angular 2应用中，点击一个链接，它会转到包含参数和数据的页面。我想我大多了解它是如何做到的，但有一个错误，防止我的数据显示到详细页面，当我点击列表页面上的链接。有人能帮我解决这个问题吗?我一整天都在纠结这个问题。基本上，当我点击列表页面上的链接时，它会转到详细信息页面。数据没有显示出来。不知道该怎么修复

film-list.component

      import { Component, OnInit } from '@angular/core';
    import { Observable } from 'rxjs/Observable'
    import { FilmService } from '../film.service';
    import { Film } from "../film";
    @Component({
      template: `
      <h1>List of Films</h1>
      <p>Films:</p>
      <ul>
        <li *ngFor="let film of films ">
         <a [routerLink]="['/films', film.id]">{{film.title}}</a>
          </li>
      </ul>
      <p *ngIf="films.length > 3">There are many vietnamese films to learn about!</p>
    `
    })
    //Component class
    export class FilmListComponent implements OnInit {
      public films: Film[] = [];//******try like this
      constructor(private filmService: FilmService) {
      }
      getFilms() {
        this.filmService.getFilms().then((films: Film[]) => this.films = films);
      }
      ngOnInit(): any {
        this.getFilms()
      }
    }
film-details

    import {Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { ROUTER_DIRECTIVES, ActivatedRoute } from '@angular/router';
import { FilmService } from '../film.service';
import { Film } from "../film";
@Component ({
  selector: 'film-details',
  template:
    `
<h1>Film Information</h1>
<h1>Rating: 5/5</h1>
     <img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=0099ff&txtclr=ffffff&txt=300%C3%97300&w=300&h=300&fm=png" width="100">
     <p>Summary information</p>


<div *ngIf="film">
<h2>{{film.title}}</h2>
<p>{{film.summary}}</p>
</div>
`,
  directives:[ROUTER_DIRECTIVES]
})
//Component class
export class FilmDetailsComponent implements OnInit {
  public sub: any;
  public films: Film[] = [];
  film: Film;
  constructor(private filmService: FilmService, private route: ActivatedRoute) {
  }
  //Load data
  ngOnInit() {
    // subscribe to route params
    this.sub = this.route.params.subscribe(params => {
      let id = params ['id'];
      //retrieve the film id
      this.filmService.getFilms(id).then(film => this.film = film);
    });
  }
  ngOnDestroy() {
    // Clean sub to avoid memory leak
    this.sub.unsubscribe();
  }
}

film-services

  import { Injectable } from "@angular/core";
    import { Film } from './film';
    import { FILMS } from './mock-films';
    @Injectable()
    export class FilmService {
      getFilms(): Promise<Film[]> {
        return Promise.resolve(FILMS)
      }
      getFilm(id: number): Promise<Film> {
        return this.getFilms()
          .then(films => films.find(film => film.id === id));
      }
    }

模拟数据

import { Film } from './film';
//storing the data in array
export const FILMS: Film[] = [
  {id:11, title: 'pokemon', summary:'great'},
  {id:12, title: 'naruto', summary: 'good'},
  {id:13, title: 'bleach', summary: 'meh'},
  {id:14, title: 'one piece', summary: 'not bad'}
];
app.routes.ts
....
// Route Configuration
export const routes: Routes = [
  { path: '', component: HomeComponent},
  { path: 'films', component: FilmListComponent},
  { path: 'films/:id', component: FilmDetailsComponent}
];

index . html

<!DOCTYPE html>
<html>
  <head>
    <title>Vietnam</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- MDL CSS library  -->
    <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css">
    <!-- MDL JavaScript library  -->
    <script src="/node_modules/bootstrap/dist/js/bootstrap.js"></script>
    <!-- Material Design Icons  -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <!-- Custom Style  -->
    <link rel="stylesheet" href="styles.css">

    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
    <!-- ./index.html  -->
    <!-- need to show up basic route -->
    <base href="/">
  </head>
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

我在你的代码中看到两个问题:

您确定从正确的路径导入FilmService吗?您正在从../film.service导入，但您声明文件名为film-services(注意您正在使用连字符作为文件名)
假设您从../film-service导入，您应该将findFilmById方法更改为getFilms。您还需要将.subscribe更改为.then，因为getFilms返回承诺而不是Observable

相关内容

最新更新

热门标签：