Создать шаблон на основе идентификатора API

Question

Как полный новичок с Angular и API, я столкнулся со стеной и не уверен, что делать дальше. В настоящее время я пытаюсь создать такой сайт, как imdb, с помощью API tmdb https://www.themoviedb.org/documentation/api

, который мне удалось показать, то есть список популярных фильмов. Но теперь я хотел бы, чтобы пользователь нажимал на mov ie, основываясь на идентификаторе, он должен сгенерировать шаблон и создать контент на основе mov ie 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>

Like это: https://www.themoviedb.org/movie/299536-avengers-infinity-war Как мне go сделать это?

Answer 1

MovieDB API предоставит вам подробную информацию о mov ie, если вы передадите идентификатор mov ie. И у каждого mov ie будут такие детали, как название, режиссер, актеры, изображение плаката и т. Д. c. В этом случае создайте общий шаблон, используя сведения, полученные из API, а затем просто замените значения в шаблонных заполнителях. Это так просто.

Mov ie компонент:

@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, и все должно работать как есть.