根据 API id 生成模板

Question

作为一个完整的 Angular 和 API 初学者，我遇到了困难，不知道如何继续。 我目前正在尝试在 tmdb api https://www.themoviedb.org/documentation/api的帮助下创建一个类似 imdb 的网站

我设法显示即流行电影的列表。 但现在我想要的是，一旦用户点击电影，它应该根据 id 生成一个模板并根据电影 id 创建内容

<div *ngFor="let movie of movies$">
    <a routerLink="/movie/{{movie.id}}"> // <- this path should be generated
        <img src="https://image.tmdb.org/t/p/w200/{{movie.poster_path}}" >
    </a>
</div>

像这样： https : //www.themoviedb.org/movie/299536-avengers-infinity-war我该怎么做？

Answer 1

如果您传递电影 ID，MovieDB API 将为您提供有关电影的详细信息。 每部电影都有标题、导演、演员、海报图像等详细信息。在这种情况下，使用从 API 获得的详细信息创建一个通用模板，然后只需替换模板占位符中的值。 就这么简单。

电影组件：

@Component({
  selector: 'my-movie',
  template: `
    <ng-container *ngIf="movie">
      <h1>{{ movie.name }}</h1>
      <p>Director: {{ movie.director }}</p>
      <p>Comics: {{ movie.comics }}</p>
    </ng-container>
  `
})
export class MovieComponent implements OnInit {
  movie: any;

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

  ngOnInit() {
    /**
     * Subscribes to route changes
     * If route params changes, get the movie id from URL
     * and get the info about the movie from IMDB API
     */
    this.route.params
      .pipe(
        map(params => +params['id']),
        switchMap(id => this.movieService.getInfo(id))
      )
      .subscribe(info => this.movie = info);
  }
}

你可以找到完整的例子这里在Stackblitz。 我只是在 MovieService 文件中使用硬编码数据。 用您的 API 调用替换它们，一切都应该按原样工作。