angularjs 2 和数据不会传递到 params 路由答案

【问题标题】：angularjs 2 and data won't pass to the params routeangularjs 2 和数据不会传递到 params 路由
【发布时间】：2016-11-03 04:01:46
【问题描述】：

一直在使用 Angular 2 应用程序，单击链接，它会转到带有参数的页面，其中包含数据。我想我主要了解它是如何完成的，但是当我单击列表页面上的链接时，会出现一个错误，阻止我的数据显示在详细信息页面上。有人可以帮助解决这个问题，我整天都被困在这个问题上。基本上，当我单击列表页面上的链接时，它会转到详细信息页面。数据不显示。不知道要解决什么问题。

电影列表.组件

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

电影服务

  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>

【问题讨论】：

您的组件中没有film 属性。你需要那个
你说的是细节组件吗？我该如何添加？
只需在public films: Film[] = []下添加一个film: Film属性
所以我添加了电影：电影；在公共电影下： Film[] = [] 并没有用。我可以尝试的任何其他事情。
您的组件正在使用findFilmById，但您在服务中的方法是getFilm。查看您的控制台是否有任何错误？

标签： angular service routing params

【解决方案1】：

我在您的代码中看到了两个问题：

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

【讨论】：

film-services 是一个错字，它是从电影服务导入的。无论如何，我将其更改为 getFilms 并将 .changed .subscribe 更改为 .then。数据仍然没有显示，但是当我访问页面时，id 参数现在显示在 url 中，因此有了改进。我会更新代码。还有什么我可以改变的吗？？
就像@peeskillet 所说，您需要在“FilmDetailsComponent”类中使用属性“film”。
我确实添加了它，但它没有做任何事情。也许我添加它的方式？电影：公开电影下的电影：Film[] = []; ?
为什么将加载电影的代码更改为this.filmService.getFilms(id).then(this.route.snapshot.params.id);？
看看它是否会起作用，因为我正在尝试一切，它没有起作用