angular - 根据 API id 生成模板
问题描述
作为 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 我该怎么做呢?
解决方案
如果您传递电影 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 调用替换它们,一切都应该按原样工作。
推荐阅读
- python - Python脚本关闭时结束执行子进程
- c++ - 复数相除 - 条件
- android - 我可以在 android studio 的片段上使用 Firebase 吗?
- sorting - 获得shell排序通过次数的公式是什么?
- unity3d - Unity 在鼠标点处实例化对象得到错误的坐标
- c# - 在不知道结构的情况下使用 Newtonsoft.Json 解析 JSON
- nuxt.js - 在 Nuxt w/ Express 中如何在保存服务器时防止重新编译
- swift - 将访问从 tableViewController 传递到另一个视图控制器
- reactjs - 反应路由器同时显示多个组件
- php - Wordpress Ultimate 会员资料图片缩放图像