Question

我有两个组件MovieListComponent和MovieDetailComponent。

当我点击View Detail中的MovieListComponent按钮时，我应该将MovieDetailComponent带到屏幕上打印的参数。

这里的问题是，如果我直接输入，此网址http://localhost:4200/movie-detail/1正常工作。如果我从MovieListComponent点击，则相同的网址无效。

不确定我在这里做错了什么。请帮忙

MovieListComponent

＆＃13;

export class MovieListComponent implements OnInit {
  movies = JSON.parse(localStorage.getItem('movies'));
  constructor(private movieService: MovieService, private router: Router) {
    this.movieService.getMovies();
  }
  onSelect(movie) {
    this.router.navigate(['/movie-detail', movie.id])
  }
}

＆＃13;

<div class="card" *ngFor="let movie of movies">
  <img alt="Thumbnail [100%x280]" style="height: 280px; width: 100%; display: block;" src="{{movie.image}}">
  <h2 class="card-text">{{movie.title}}</h2>
  <a class="btn btn-primary" (click)="onSelect(movie)">View Details</a>
</div>

＆＃13;

MovieDetailComponent.html

＆＃13;

export class MovieDetailComponent implements OnInit {
  id: number;
  constructor(private router: ActivatedRoute, private movieService: MovieService) {}
  ngOnInit() {
    this.router.params.subscribe((params) => {
      this.id = params['id'];
    })
  }
}

＆＃13;

{{ id }}

＆＃13;

AppRouting

＆＃13;

const routes: Routes = [{
    path: '',
    component: MovieListComponent,
  },
  {
    path: 'admin',
    component: MovieControlComponent,
  },
  {
    path: 'movie-list',
    component: MovieListComponent,
  }, {
    path: 'movie-detail/:id',
    component: MovieDetailComponent,
  }
];

＆＃13;

MovieService.ts

＆＃13;

@Injectable()
export class MovieService {

  constructor(private http: Http) {
    //this.http.get('../movies.json').map(response => response.json());
  }
  getMovies() {
    return this.http.get('data/movies.json')
      .map(response => response.json())
      .subscribe(result => localStorage.setItem("movies", JSON.stringify(result)));
  }
}

＆＃13;

Answer 1

问题是this.id = params['id'];您已将您的ID设置为编号id: number;，但params是字符串。要将它转换为数字，请在这样的参数之前添加+：

this.id = +params['id'];

(+)将id字符串转换为数字

Answer 2

MovieService -

getMovies() {
    return this.http.get('data/movies.json')
        .map(response => response);
}

getMovieDetails(id) {
    return this.http.get('data/movies.json')
        .map(response => {
            const index = response.map(m => m.id).indexOf(id);
            return response[index];
        });
}

MovieListComponent -

export class MovieListComponent implements OnInit {
    public movies: any; // or create interface Movie[]
    constructor(
        private movieService: MovieService, 
        private router: Router
    ) {}

    ngOnInit() {
        this.movieService.getMovies().subscribe(res => {
            this.movies = res;
        });
    }

    onSelect(id) {
        this.router.navigate(['/movie-detail', id]);
    }
}

<div class="card" *ngFor="let movie of movies">
    <img alt="Thumbnail [100%x280]" style="height: 280px; width: 100%; display: block;" [src]="movie.image">
    <h2 class="card-text">{{movie.title}}</h2>
    <a class="btn btn-primary" (click)="onSelect(movie.id)">View Details</a>
</div>

MovieDetailComponent -

export class MovieDetailComponent implements OnInit {
    public id: string; // <--- string not number
    public movie: any; // or create interface Movie

    constructor(
        private route: ActivatedRoute,
        private movieService: MovieService
    ) {}

    ngOnInit() {
        this.id = this.route.snapshot.paramMap.get('id'));
        this.movieService.getMovieDetails(this.id).subscribe(res => {
            this.movie = res;
        });
    }
}

希望有所帮助

从组件导航时路由参数URL不起作用

2 个答案: